mat-optgroup не работает с CompareWith

#angular #typescript

Вопрос:

при использовании групп я получаю неопределенное значение на x2 в моем сравнении, но удаление группы работает нормально. Чего мне здесь не хватает? почему не работает по сравнению с работой при наличии мат-оптгруппы?

     <mat-form-field>
      <mat-label>Products</mat-label>
      <mat-select [compareWith]="compareWith">
        <mat-optgroup
          *ngFor="let group of productGroups"
          [label]="group.name"
        >
          <mat-option *ngFor="let item of group.Items" [value]="item">
            {{ item.productName}}
          </mat-option>
        </mat-optgroup>
      </mat-select>
    </mat-form-field>
 
   compareWith(x1: any, x2: any): boolean {
    console.log('compareWith', x1, x2); // When using groups x2 is undefined
    return x1.id == x2.id
  }