Question

在我的班级中，我有一个名为“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属性。但是，当单击“添加网站”按钮 AFTER 时，用户会选择输出null的内容，这是原始值，而不是更新的值。为什么呢？

Answer 1

至少您需要将自动填充<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正在使用中。

希望这有帮助！

Angular：单击按钮时无法更新类中的属性

1 个答案: