Filter Sibling Выбор элементов на основе выбора - PullRequest
Новая
       3

Filter Sibling Выбор элементов на основе выбора

0 голосов
/ 25 февраля 2020

Мне нужно представить элементы X <select>, используя Angular Реактивные формы. Кроме того, элемент <select> является частью Component. Все это хорошо отрисовывается с использованием исходного массива опций. 

<form novalidate autocomplete="off" [formGroup]="form">
    <ng-container 
      *ngFor="let control of choices.controls; let i = index" formArrayName="choices">
    <form-select 
      [controlName]="i"
      placeholder="Select an Option"
      [options]="options">
    </form-select>  
  </ng-container>
</form>

Мой источник данных слишком плотный, чтобы работать с ним, поэтому мое воспроизведение с массивом цветов. 

const colors = [
  { id: 1, name: "Red" },
  { id: 2, name: "Blue" },
  { id: 3, name: "Green" },
  { id: 4, name: "Purple" },
  { id: 5, name: "Yellow" },
  { id: 6, name: "Black" },
  { id: 7, name: "White" }
];

Идея здесь заключается в том, что каждый выбор должен содержать ВСЕ цвета, кроме тех, которые выбраны в настоящее время. Таким образом, если есть 3 выбора, пользователь выбирает КРАСНЫЙ из первого выбора, выбор 2 и 3 не отображают КРАСНЫЙ.

ПРОБЛЕМА, с которой я сталкиваюсь, это печально известный ExpressionChangedAfterItHasBeenCheckedError. Распространенные решения для исправления этой проблемы не сработали, и я понимаю, что происходит внутри Component. Я вызываю изменение в списке опций после выполнения проверки. Я в растерянности относительно того, как исправить это, чтобы это не вызывало эту ошибку.

Я настроил stackbliz , чтобы проиллюстрировать полную проблему.

Основные ссылки на источники, которые я использовал, не включают все

...