无法访问html模板中的this.text

Question

我正在尝试添加两个按钮，它们只应在输入字段中有一些文本时显示，否则默认情况下应隐藏/禁用它，但我收到此错误。

<div class="card card-body">

`<form>`

    `<div class="form-group">`

        `<input type="text" class="form-control" placeholder="Add a Log ...">`

        `<input type="submit" value="Add Log" class="btn btn-light" [disabled]=!this.text>`

        `<button class="btn btn-warning" [hidden]=!this.text>Clear </button>`

    `</div>

`</form>

</div>

错误：清除~~~~~~~~~

         src/app/components/log-form/log-form.component.ts:5:16

         templateUrl: './log-form.component.html',

                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~

       Error occurs in the template of component LogFormComponent.

Answer 1

您可以使用 ngModel 轻松实现此目的，如下所示：mycomp.component.html<form>&nbsp;<div class="form-group">&nbsp; &nbsp; &nbsp;<input type="text" class="form-control" name="text" [(ngModel)]="textvalue" placeholder="Add a Log ...">&nbsp; &nbsp; &nbsp;<input type="submit" value="Add Log" class="btn btn-light" [disabled]="!textvalue">&nbsp; &nbsp; &nbsp;<button class="btn btn-warning" [hidden]="!textvalue">Clear </button>&nbsp;</div>&nbsp;{{textvalue}}//contains value of your input element.</form>mycomp.component.tsexport class MyComponent {&nbsp; textvalue:string;}请务必在 app.module.ts 文件的 import[] 数组中导入 FormsModule，以便 ngModel 正常工作。此外，输入的 name 属性也很重要，或者您可以使用 formControlName。希望这可以帮助！！！

Answer 2

反引号内不需要反引号"text"不是this.text`<form>&nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; <input type="text" class="form-control" placeholder="Add a Log ...">&nbsp; &nbsp; <input type="submit" value="Add Log" class="btn btn-light" [disabled]="!text">&nbsp; &nbsp; <button class="btn btn-warning" [hidden]="!text">Clear </button>&nbsp; &nbsp; </div></form>`

Answer 3

您缺少模板中的引号：[disabled]="!this.text"