Question

我有一个数组customerList: Array<String> = [];和一个函数，该函数将服务器的值推入该数组。它工作正常，除了当我在该数组上使用.filter()时，它给了我不确定的错误。这段代码是：

customerList: Array<String> = [];

ngOnInit() {
this.customerService.getCustomers().subscribe(res => {
    this.customers = res;
    for (const cust of res) {
      this.customerList.push(cust.first_name);
    }
  }
);
}

findChoices(searchText: string) {
return this.customerList.filter(item =>
  item.toLowerCase().includes(searchText.toLowerCase())
  ); 
 );
}

HTML代码：

<mwl-text-input-autocomplete-container>
  <input type="text" class="form-control" id="customer_name" name="customer_name" aria-describedby="emailHelp"
                 placeholder="Customer name" formControlName="customer_name" mwlTextInputAutocomplete
                 [findChoices]="findChoices"
                 [getChoiceLabel]="getChoiceLabel" autofocus>
</mwl-text-input-autocomplete-container>

customerList.filter()中的findChoices()给出了错误。

P.S。-我正在使用this package

Answer 1

由于您要将函数对象findChoices作为值传递给[findChoices]，因此this的值将不会绑定到您的组件，因此this.customerList将是未定义的。

您可以按照以下步骤使用闭包来确保customerList对[findChoices]可见：

更改findChoices的实现以返回可以用作[findChoices]的值的函数-该函数接受字符串参数。

findChoicesIn(list) {
  return (searchText) => 
          list.filter(item => item.toLowerCase().includes(searchText.toLowerCase()));
};

使用由此生成的函数作为[findChoices]
的值
```
[findChoices]="findChoicesIn(customerList)"
```

Answer 2

接缝 customerList 为空或为空，只需添加支票

if(this.customerList && this.customerList.length > 0){
  return this.customerList.filter(item =>
  item.toLowerCase().includes(searchText.toLowerCase())
  ); 
}

无法在Angular中读取未定义数组的属性'filter'

2 个答案: