如何防止清除下拉列表中先前选择的值？我在 FormArray 中使用 MatSelectSearch

Question

我正在尝试在 FormArray 内的下拉列表中实现 MatSelectSearch。我想我快到了，但我遇到的问题是在为我的第一行选择一个值之后，我添加了另一行并再次开始搜索，第一行的值似乎被清除，直到我完成输入或选择第二行的值。

我做了一个 StackBlitz 来演示我的问题。

在此先感谢您的帮助！

Answer 1

改进我的评论。

首先声明filter_admin_advocacy为数组

//see that is simple an empty array
public filter_admin_advocacy: ReplaySubject<any[]>[] = [];

更改函数initializeAdminAdvocacyFilter。我们用这个函数给this.filter_admin_advocancy[i]

赋值

此外，我们使用 "startWith" 管道强制执行下一个 -else 首先我们得到一个空列表 -

initializeAdminAdvocacyFilter(i) {
    //declare the filter_admin_advocacy[i]
    this.filter_admin_advocacy[i] = new ReplaySubject<any[]>(1);

    const adminAdvocacy = <FormArray>this.type.controls['selected_interests'];
    adminAdvocacy.controls[i].get('admin_advocacy_filter_ctrl').valueChanges
    .pipe(
      takeUntil(this._onDestroy),
      //it's important the startWith
      startWith(adminAdvocacy.controls[i].get('admin_advocacy_filter_ctrl').value))
    .subscribe(() => {
      this.filterAdminAdvocacies(i);
    });
  }

filterAdminAdvocacies 函数，我们将this.filter_admin_advocacy替换为this.filter_admin_advocacy[i]

filterAdminAdvocacies(i) {
    if(!this.advocacies) {
      return;
    }

    // get the search keyword
    const adminAdvocacy = <FormArray>this.type.controls['selected_interests'];

    let search = adminAdvocacy.controls[i].get('admin_advocacy_filter_ctrl').value;

    if(!search) {
      //HERE
      this.filter_admin_advocacy[i].next(this.advocacies.slice());
      return;
    } else {
      search = search.toLowerCase();
    }

    // filter the gender_titles
    //and HERE
    this.filter_admin_advocacy[i].next(
      this.advocacies.filter(advocacies => advocacies.advocacy.toLowerCase().indexOf(search) > -1)
    );

  }

在 ngOnInit 中，在 initializeForm 之后，调用 initializeAdminAdvocacyFilter(0)

  this.initializeForm();
  this.initializeAdminAdvocacyFilter(0)

  //and remove the this.filter_admin_advocacy.next
  //the startWith in the subscribe make the work 
  //    this.filter_admin_advocacy[0].next(this.advocacies.slice());

过滤器中最后使用数组

  <mat-option *ngFor="let advocacy of filter_admin_advocacy[i] | async" 
       [value]="advocacy.id">
       {{ advocacy.advocacy }}
  </mat-option>

我forked the stackblitz

如何防止清除下拉列表中先前选择的值？我在 FormArray 中使用 MatSelectSearch

How to prevent previous chosen values in dropdowns from clearing? I am using MatSelectSearch in a FormArray

select

angular-material

dropdown

angular

formarray