Angular 响应式表单中 Table 的嵌套输入搜索

Question

我有一个非常简单的问题，我无法解决。我只需要 table 中的自动完成输入即可运行。

请看这个 stackblitz link

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);
}

可用的解决方案here。

Angular 响应式表单中 Table 的嵌套输入搜索

Nested Input Search in Table in Angular Reactive Forms

angular-material

angular

angular-reactive-forms

angular-forms

angular7