значение mat-select не отображается

Question

У меня есть view одного из моих Angular Components a mat-select.Это Angular Component имеет форму, используемую для редактирования некоторых данных.Таким образом, идея заключается в том, что когда я открываю вид компонента, форма заполняется заранее

  <mat-form-field> 
          <mat-select
            [(value)]="selectedGroups"
            placeholder="Select the associated Bitbucket groups ..."
            multiple>

            <mat-option
            *ngFor="let group of bitbucketgroupsList?.results"
            [value]="group.id">{{group.bitbucket_group}}
            </mat-option>
           </mat-select> 
   </mat-form-field>

Это ngOnInit функция:

selectedGroups = [];
ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
        this.id = +params['id'];
    });
    this.EditteamForm = this._fb.group({
        name: ['', Validators.required],
        description: ''
    });
    let url = this.baseUrl + `/teams/${this.id}`;
    this.httpClient.get(url).subscribe((data: Array<any>) => {
        this.EditteamForm.controls['name'].setValue(data['results'][0]['name']);
        this.EditteamForm.controls['description'].setValue(data['results'][0]['description']);
        for (let i = 0; i < data['results'][0]['bitbucket_group'].length; i++) {
            let value = data['results'][0]['bitbucket_group'][i]['id'];
            this.selectedGroups.push(value);
        }

    });
}

Что я делаю в ngOnInit, так это то, что я посылаю HTTP request, чтобы получить фактические данные команды и показатьих в форме (предварительно заполнив форму), а затем пользователь может изменить их.Моя проблема в том, что, когда я открываю представление, которое имеет форму, значение selectedGroups не выбирается в поле mat-select.Даже у меня есть другой компонент с той же логикой, и он работает нормально.Здесь я не знаю, что мне не хватает.Когда я делаю console.log(this.selectedGroups), я вижу, что список имеет значение, но он не отображается в mat-select.Есть какие-нибудь подсказки?

Answer 1

Используйте функцию compareFn, которая сообщает Angular, как сравнивать значения.

Чтобы настроить алгоритм сравнения параметров по умолчанию, поддерживает ввод CompareWith.CompareWith принимает функцию, которая имеет два аргумента: option1 и option2.Если задано CompareWith, Angular выбирает опцию по возвращаемому значению функции

Ref: https://angular.io/api/forms/SelectControlValueAccessor

<mat-form-field>
  <mat-select placeholder="Toppings"
  [compareWith]="compareFn" 
   [(value)]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping.name}}</mat-option>
  </mat-select>
</mat-form-field>

Пример: https://stackblitz.com/edit/angular-ad3eqa-s3f4z1