Как предотвратить сброс предыдущих выбранных значений в выпадающих списках? Я использую MatSelectSearch в FormArray

Question

Я пытаюсь реализовать MatSelectSearch в наших выпадающих меню внутри FormArray. Я думаю, что я почти у цели, но проблема, с которой я столкнулся, заключается в том, что после выбора значения для моей первой строки я добавляю другую строку и начинаю поиск снова, значение первой строки кажется очищенным, пока я не закончу печатать или выберу значение для второй строки.

Я сделал 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", чтобы принудительно вызвать следующий, иначе сначала мы получим пустой список -

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

* 1016 использовать массив в фильтре

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

I , разветвленный стек * блиц