мат-чип не отображается в соответствии с начальным значением FormControl

Question

Мне нужно визуализировать мат-чипы, используя значение formControl, а также визуализировать опцию множественного выбора. Для этого я использовал модули материалов. Он не отображает начальное значение formControl

HTML:

<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppingsControl" multiple>

    <mat-select-trigger>
      <mat-chip-list>
        <mat-chip *ngFor="let topping of toppingsControl?.value"
          [removable]="true" (removed)="onToppingRemoved(topping)">
          {{ topping?.name }}
          <mat-icon matChipRemove>cancel</mat-icon> 
        </mat-chip> 
      </mat-chip-list> 
    </mat-select-trigger>

    <mat-option *ngFor="let topping of toppingList$ | async" [value]="topping">{{topping.name}}</mat-option>

  </mat-select>
</mat-form-field>

<br/>
{{ toppingsControl?.value | json }}

Ts файл:

export class SelectMultipleExample {
  private test = new Subject<{ id: number; name: string }[]>();
  toppingList$ = this.test.asObservable();

  // Initialize formCOntrol value
  toppingsControl = new FormControl([{ id: 1, name: "Extra cheese" }]);

  constructor() {
    setTimeout(() => {
      this.test.next([
        { id: 1, name: "Extra cheese" },
        { id: 2, name: "Mushroom" }
      ]);
    }, 5000);
  }

  onToppingRemoved(topping: string) {
    const toppings = this.toppingsControl.value as string[];
    this.removeFirst(toppings, topping);
    this.toppingsControl.setValue(toppings); // To trigger change detection
  }

  private removeFirst<T>(array: T[], toRemove: T): void {
    const index = array.indexOf(toRemove);
    if (index !== -1) {
      array.splice(index, 1);
    }
  }
}

Нажмите, чтобы увидеть, что отображается на экране:

Answer 1

Я думаю, это потому, что вы используете 2 экземпляра {id: 1, name: "Extra cheese"}.

Итак, вы должны делать то, что хотите:

• вы используете тот же экземпляр вашего объекта, примерно так:

myExtraCheeseObject = { id: 1, name: "Extra cheese" };
 
 // Initialize formControl value
  toppingsControl = new FormControl([myExtraCheeseObject]);

  constructor() {
    setTimeout(() => {
      this.test.next([
        myExtraCheeseObject,
        { id: 2, name: "Mushroom" }
      ]);
    }, 5000);
  }

• вы используете compareWith (https://material.angular.io/components/select/api)

// just compare ids
compareObjects(o1: any, o2: any) {
  return o1.id == o2.id
}

// compare id and name
compareObjects(o1: any, o2: any) {
  return o1.id == o2.id && o1.name == o2.name
}

 <mat-select [formControl]="toppingsControl" 
     [compareWith]="compareObjects"
     multiple>
 </mat-select>

(еще один совет: вам следует избегать использования setTimeout и кода в конструкторе, вместо этого используйте ngOnInit)