Как заставить ngx-mat-select-search привязываться к массиву и иметь выходной эмиттер при изменении выбора?

Question 1

Я использую ngx-mat-select-search для раскрывающегося списка с множественным выбором и поиском.

Я пытаюсь сделать его компонентом, который:

Задается как @Input() список значений для отображения
Выбранные значения привязаны к некоторому массиву, чтобы родительский компонент мог иметь доступ к текущим выборам.
Имеет эмиттер @Output(), который сообщает родительскому компоненту, что параметры отмечены/сняты. Затем родитель может делать что угодно со значениями, которые были связаны в 2.

Вот что у меня есть: https://github-omyu1h.stackblitz.io

angular

1

kebab-case 17 Дек 2019 в 20:09

Answer

Вы можете удалить реактивный контроль формы

public bankMultiCtrl: FormControl = new FormControl();

И используйте свойство модели, которое вы определили в своем примере

  // 2. selectedValues should be bound to whatever is selected
  @Input() selectedValues: string[] = [];
  // 3. output whenever a change is made to selectedValues
  @Output() selectionChange = new EventEmitter();

В вашем шаблоне следующим образом:

  <mat-form-field>
    <mat-select [ngModel]="selectedValues" (ngModelChange)="selectionChange.emit($event)" placeholder="Banks" [multiple]="true" #multiSelect>
      <ngx-mat-select-search [formControl]="bankMultiFilterCtrl"></ngx-mat-select-search>
      <mat-option *ngFor="let bank of filteredBanksMulti | async" [value]="bank">
        {{bank}}
      </mat-option>
    </mat-select>
  </mat-form-field>

См. https://stackblitz.com/edit/github-omyu1h-juy4ay?file=src/app/examples/02-multiple-selection-example/multiple-selection-example.component.ts

1

Esteban Gehring 19 Дек 2019 в 11:06

Question 2