Многострочный фильтр не работает должным образом. Вы знаете, что это такое?

Question

У меня есть фильтр нескольких столбцов, основанный на следующем примере https://stackblitz.com/angular/amrveogbkvg?file=src%2Fapp%2Fselect-custom-trigger-example.html. Фильтр, кажется, работает, но когда я нажимаю на флажки, ничего не происходит, и выбор не отображается в mat-select. Вы знаете, что это?

Мой код:

// HTML
<mat-form-field>
   <mat-label>Auswahl</mat-label>
       <mat-select [formControl]="columnFilters.controls[i]" multiple>
          <mat-select-trigger>
            {{columnFilters.controls[i].value ? columnFilters.controls[i].value[0]:''}}
              <span *ngIf="columnFilters.controls[i].value && columnFilters.controls[i].value.length > 1" class="example-additional-selection">
               ({{columnFilters.controls[i].value.length - 1}} {{columnFilters.controls[i]?.length === 2 ? 'weiteres' : 'andere'}})
              </span>
         </mat-select-trigger>
        <mat-option *ngFor="let columnFilter of dataAttributesColumnFilter[column.attribute]" [value]="columnFilter">
        {{columnFilter}}
         </mat-option>
     </mat-select>
</mat-form-field>

// TS
 public columnFilters: FormArray;
 public dataAttributesColumnFilter = {};

 public setupForm() {
    const controls: AbstractControl[] = [];
    for (const col of this.columns) {
      const formCtrl = this.formBuilder.control('');
      formCtrl.valueChanges.subscribe((val) => {
        for (const ctrl of this.columnFilters.controls) {
          ctrl.setValue('', { emitEvent: false });
        }
        this.cancelFilter();
        this.applyFilter(`${val}`);
      });
      controls.push(formCtrl);
    }
    this.columnFilters = new FormArray(controls);
  }

for (const attr of this.columns) {
   const columnData = rows.filter((d) => {
 return d[attr] !== undefined && d[attr] !== null;
  }).map((d) => {
 return d[attr];
  });
 this.dataAttributesColumnFilter[attr] = _.uniq(columnData);
}