错误类型错误：无法读取未定义的属性“过滤器”：在 ts 文件中

Question

我是 Angular 的新手，我试图在我的项目中实现自动完成......但每次我打开我的表单时，我都会收到以下错误......无法解决它 我的 HTML 代码：

<mat-form-field class="col-12 col-sm-6 ">
<mat-label class="padding">Item  Name</mat-label>
  <input matInput formControlName="itemName" [matAutocomplete]="auto" style="padding-left: 10px;" >
  <mat-autocomplete #auto="matAutocomplete">
     <mat-option *ngFor="let list of filteredOptions | async"  [value]="list.codename">
    {{list.codevalue}}
  </mat-option>
  </mat-autocomplete>

<mat-error *ngIf="getvalue.itemName.errors">{{getitemNameErrorMessage()}}</mat-error>

无；"> -->

我的 ts 文件：

  ngOnInit() {
this.formType = this.editRowData !== null ? 'Edit' : 'Add';
const inventoryId = this.editRowData !== null ? this.editRowData.id : '';
// const pid = this.editRowData !== null ? this.editRowData.

// for inventory dropdown
this.inventoryservice.getInvDropdown().subscribe(
  data => {
    this.brandList = data['brands'],
    this.categoryList = data['categories'];
    this.unitsList = data['units'];
    this.vendorList = data['vendors'];
    this.materialList = data['materials'];
  }
);
if (inventoryId) {
  // call service to get project details
  this.inventoryservice.getProjectInventory(inventoryId).subscribe(
    data => {
      this.project = data[0].projectId;
      this.formBuilderOnDemand(data[0]);
      this.hideImage = data[0].itemImage !== null ? true : false ;
      this.hideInvoice = data[0].invoiceImage !== null ? true : false ;
      this.showForm = true;
      this.filter();
    }
  );
// this.formBuilderOnDemand(res);
} else {
  this.formBuilderOnDemand(this.editRowData);
  this.showForm = true; 

}}

filter() {
this.filteredOptions = this.updateInventoryForm.get('itemName').valueChanges
  .pipe(
    startWith(''),
    map(value => this._filter(value))
  ); }
 private _filter(value: any): any[] {
const filterValue = value.toLowerCase(); // error line of code;
return this.materialList.filter(list =>list.codevalue.toLowerCase().includes(filterValue));}

Answer 1

由于传入的数据为空且过滤方法期待数据，因此，这导致了错误。

这是一个有效的实现：

filter() {
this.filteredOptions = this.updateInventoryForm.get('itemName').valueChanges
  .pipe(
    startWith(''),
    map(value => this._filter(value))
  ); }
 private _filter(value: any): any[] {
const filterValue = value.toLowerCase();
if(!this.materialList) return this.materialList; // <-- add this line
return this.materialList.filter(list =>list.codevalue.toLowerCase().includes(filterValue));}