angular - 选项未在 mat-select 中显示或未被选中

Question

我想在我的 Angular 表单中的 mat-select 字段中预选一些选项，所以我在 typescript 文件中有这段代码:

selectedApps = [];
ngOnInit() {
    const url = this.baseUrl + `/projects/${this.id}`;
    this.httpClient.get(url).subscribe((data: Array<any>) => {
        for (let i=0; i<data['results'][0]['apps'].length; i++) {
            this.selectedApps.push(data['results'][0]['apps'][i]['name']);    
        }

    });
}

这是垫选择输入字段:

          <div class="col-sm-8 float-left">

        <mat-form-field> <mat-select
          [(value)]="selectedApps" 
          placeholder="Select the associated applications ..."
          multiple (click)="getAppList();"> <mat-option
          *ngFor="let app of appsList?.results" [value]="app.id">{{app.name
        }}</mat-option> </mat-select> </mat-form-field>
      </div>

我的问题是 selectedApps 的值没有显示在字段内，即使这些值已正确插入数组。这是为什么？

Answer 1

你正在“预选”名字

this.selectedApps.push(data['results'][0]['apps'][i]['name']);  

当您的选项包含 id

<mat-option
          *ngFor="let app of appsList?.results" [value]="app.id">{{app.name
        }}</mat-option>

为了使其正常工作，selectedApps 必须保持与 mat-option [value] 属性相同的值。毕竟，这就是实际的 mat-select 值。

老实说，我会将整个 app 作为一个值，因为没有理由威胁它或她。它会简化很多代码。