无法访问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>

 <div class="form-group">

     <input type="text" class="form-control" name="text" [(ngModel)]="textvalue" placeholder="Add a Log ...">

     <input type="submit" value="Add Log" class="btn btn-light" [disabled]="!textvalue">

     <button class="btn btn-warning" [hidden]="!textvalue">Clear </button>

 </div>

 {{textvalue}}//contains value of your input element.

</form>

mycomp.component.ts

export class MyComponent {

  textvalue:string;

}

请务必在 app.module.ts 文件的 import[] 数组中导入 FormsModule，以便 ngModel 正常工作。此外，输入的 name 属性也很重要，或者您可以使用 formControlName。

希望这可以帮助！！！

Answer 2

反引号内不需要反引号

"text"不是this.text

`<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]="!text">

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

    </div>

</form>`

Answer 3

您缺少模板中的引号：

[disabled]="!this.text"