Question

自动完成材料实施，但是从列表中选择一个项目显示为[对象]。

为了显示需要使用此模块的数据数组，我将其应用于以下视图。

<mat-form-field>
  <input type="text" matInput [matAutocomplete]="auto" formControlName="item">
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="itemDataChange($event)" 
      [displayFn]="displayFn">
    <mat-option *ngFor="let item of itemsListFiltrado | async" [value]="option.value"> 
      {{option.option}}</mat-option>
  </mat-autocomplete>
</mat-form-field>

我需要使用所选项目的value属性，但我想显示其选项。这些属性符合控制器中应用的接口。

我使用以下过程对数组 itemsList 进行过滤：

export interface Option {
  option: string;
  value: string;
}

// (...)


public itemsList: Option[] = [];
public itemsListFiltrado: Observable<Option[]>;
public codigoArticuloInsrt: number;

filterItems(option: any) {
  const filterValue = option.toString().toLowerCase();
      const filterList = this.itemsList.filter(indexArt => 
        indexArt.option.toLowerCase().indexOf(filterValue) === 0);
      if (filterList.length === 1) {
        // property used for data saving
        // for saving the form for saving the form
        this.codigoItemInsrt = parseInt(filterList[0].value, 0);
      }
      return filterList;
   }
listFltr() {
  return this.itemsListFiltrado =

    // when the controller changes value 
    this.editDetailLineForm.controls.item.valueChanges
      .pipe(
        startWith(''),
        map(param => this.filterItems(param))
      );
  }

最后，它在调用将数据加载到数组的服务的方法中实例化。

在Github中找到的旧线程中，我使用displayWith属性，但没有任何改变。

displayFn(i: Option) {
    if (i) { return i.option; }
  }

Answer 1

正在调用您的方法吗？尝试在函数内部写入控制台以进行验证。您可能需要使displayFn成为箭头函数，如下所示：

displayFn = (i: Option) => {
  console.log('in displayFn, param = ', i);
  if (i) {
    console.log('returning i.option', i.option);
    return i.option;
  } else {
    console.log('no Option');
    return undefined;
  }
}

如果毕竟，您的方法被调用，并且没有其他明显的事情，是i.option是字符串还是对象？

自动完成材料显示[对象对象]

1 个答案: