声明了 Angular 5 'inputClick' 但它的值从未被读取

Question

我是 Angular 和前端编程的新手，如果这太简单了，我很抱歉。

我有一个 HTML 文件，看起来像这样

<input class="born-date-input" formControlName="dateOfBorn" minlength="1" maxlength="10" (click)="inputClick=true"/>
<div class="alert alert-warning" *ngIf="inputClick==true">
      <small>show warning</small>
</div>

在我的组件 .ts 文件中有

export class MainInputFormComponent implements OnInit, DoCheck {
  @Output('changeData') sendTheNewDataJSON = new EventEmitter<any>();

  private inputClick: boolean = false;
}

在 HTML 文件中没有看到 inputClick 变量

Answer 1

如果您将其声明为私有(private)，则不会发生数据绑定(bind)。您需要将其声明为 public 以使其可用。按照下面的代码:

   export class MainInputFormComponent implements OnInit, DoCheck {
      @Output('changeData') sendTheNewDataJSON = new EventEmitter<any>();

      public inputClick: boolean = false;
    }

然后您可以像这样在 HTML 中使用它。

<input class="born-date-input" formControlName="dateOfBorn" minlength="1" maxlength="10" (click)="inputClick=true"/>
<div class="alert alert-warning" *ngIf="inputClick">
      <small>show warning</small>
</div>