javascript - Angular :单击按钮时无法更新类中的属性

在我的课程中，我有一个名为“ curSelectedSite”的属性，默认情况下将其设置为null：

export class MyComponent implements OnInit {
  curSelectedSite = null;

  displayFn(site): string {
    this.curSelectedSite = site;
    return site ? site.name : site;
  }

  addSite(): void {
      console.warn(this.curSelectedSite) // outputs "null" and not the chosen autocomplete value as it should
  }
}

在我的标记中，我有一个自动填充字段，可让用户从网站列表中选择一个网站：

<mat-form-field class="field">
    <md-input-container>
        <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" placeholder="Choose Site" id="choose-site">
    </md-input-container>
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
        <mat-option *ngFor="let site of sites" [value]="site">
            {{site.name}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

<button mat-raised-button (click)="addSite()">Add Site</button>

当用户从下拉菜单中选择一个选项时，将触发displayFn方法。如您所见，当用户选择时，我正在更新curSelectedSite属性。但是，当用户单击“添加站点”按钮后，如果用户选择了某些内容，它将输出null，它是原始值，而不是更新的值。为什么？

最佳答案

至少需要将自动完成<input>的值绑定到类属性curSelectedSite。没有此绑定，当用户从自动完成下拉菜单中选择一个选项时，Angular无法知道如何更新curSelectedSite的值。

可以使用NgModel或Template Drive Forms或Reactive Forms之类的表单结构。

<mat-form-field class="field">
    <md-input-container>
        <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" placeholder="Choose Site" id="choose-site" [(ngModel)]="curSelectedSite">
    </md-input-container>
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
        <mat-option *ngFor="let site of sites" [value]="site">
            {{site.name}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

<button mat-raised-button (click)="addSite()">Add Site</button>

{{curSelectedSite}}

这是一个正在起作用的example。

希望有帮助！