Angular 2+ mat-autocomplete 显示 [Object Object]

Question

我有Angular 8 mat-autocomplete 和[displayWith]="getDropdownView" 在哪里

getDropdownView(option) {
    console.log("getDropdownView(): option:", option);
    return "abc";  // FOR TEST
    // return option.value;
}

对于一个页面，这可以正常工作，但对于另一个页面，则显示[Object Object]。有这样的HTML代码：

<input matInput placeholder="Начните вводить..." [matAutocomplete]="auto" [id]="field.field"
    [value]="getDropdownValue(field.field)"
    (input)="loadDropdownData($event.target.value, field.field)">

<mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption
    (optionSelected)="onDropdownSelected($event.option.value, field.field)"
    [displayWith]="getDropdownView">

    <mat-option *ngIf="dropdownIsLoading[field.field]" class="is-loading">
        <mat-spinner diameter="50"></mat-spinner>
    </mat-option>

    <mat-option *ngFor="let option of dropdownData[field.field]" [value]="option" style="width: 300px">
       <span>{{ option.value }}</span>
       <small> | ID: {{option.id}}</small>
    </mat-option>

</mat-autocomplete>

*.ts 也有这个方法：

getDropdownValue(field_name) {
    let id = this.model.data[field_name];
    for (let i in this.dropdownData[field_name]) {
      let option = this.dropdownData[field_name][i];
      if (option.id === id) {
        console.log("getDropdownValue(): option:", option);
        return option;
      }
    }
    console.log("getDropdownValue(): option: null");
    return null;
  }

当我通过下拉菜单更改所选项目时的执行日志（无文本输入）：

1. getDropdownValue() 用于输入的 [value] 被多次调用并使用正确的旧项目（将复合对象设置为自动完成的选择值）；
2. getDropdownView() 用于 mat-autocomplete 的 [displayWith] 被正确的新项目调用（从 new 复合对象中获取显示值）；
3. onDropdownSelected() 用于 mat-autocomplete 的 (optionSelected) 被调用并带有正确的新项目（通知 *.ts 该选项已被选择）；
4. getDropdownValue() 输入的 [value] 再次被调用多次，并带有正确的新项目。

我怎样才能得到正确的displayWith 而不是[Object Object]？

Answer 1

尝试从您的<input> 中删除[value]="getDropdownValue(field.field)"。

获取一个数组字段并将其作为模型而不是值绑定到您的输入。 然后在每次新选择时，将新值添加到现有数组中。

处理预填充：获取组件构造函数中的值并将它们全部分配给数组字段。

上述解决方案是当您不使用formControls时，如果您使用formControls，您可以将值分配给我们刚刚分配给数组的formControl字段。