在Angular Reactive Forms中的表格中进行嵌套输入搜索。

Question

我有一个非常简单的问题，我无法解决它。我只需要表格中的自动完成输入功能。

请看这个stackblitz 联系

onSelectProduct(val: string) {
    this.filteredOptions = this.form.get("products").valueChanges.pipe(
      startWith(""),
      map(value => this._filter(value))
    );
  }

  private _filter(value: string): string[] {
    console.log(value);
    const filterValue = value.toLowerCase();
    return this.options.filter(
      option => option.toLowerCase().indexOf(filterValue) === 0
    );
  }

Answer 1

为了修复自动完成功能，你需要初始化一个叫 "自动完成 "的变量。filteredOptions.

在构造函数中初始化该变量。并将你的值写入过滤器函数的输入中。

constructor() {
 // .. code omitted
 this.initFilteredOptionsByIndex(0);
}

initFilteredOptionsByIndex(index: number) {
  this.filteredOptions = this.form.get("products").valueChanges.pipe(
    startWith(""),
    map(value => this._filter(value, index))
  );
}

onFocus(index: number) {
 // I use input focus to get each row index
 this.initFilteredOptionsByIndex(index);
}

private _filter(value: any, index: number): string[] {
  if (!value) {
    return [];
  }

  const filterValue = value[index].product_id.toLowerCase();

  return this.options.filter(option => option.toLowerCase().indexOf(filterValue) === 0);
}

可用的解决方案 此处.