When loading list, mat-select should be already filled

Question

This is my html

<div class="container">
    <div class="row">
        <div class="col-md-12">
        <table class="table table-striped table-bordered">
            <caption>
                Lista de Aplicabilidades
                <div class="float-right">
                    <input type="button" class="btn btn-success" (click)="onCreate()" value="+">
                </div>
            </caption>
            <thead class="thead-dark">
                <tr>
                    <th>Nome</th>
                    <th>Contexto</th>
                    <th>Tipo de Pagamento</th>
                    <th>Tipo de Entrega</th>
                    <th>MarketPlace</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let aplicabilidade of dataSource" [formGroup]="createForm">
                    <td>
                        <input formControlName="id" type="hidden">
                        <label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.name }}</label>
                        <label *ngIf="aplicabilidade.edit === true"><input formControlName="name" type="text"></label>
                    </td>
                    <td> 
                        <label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.context }}</label>
                        <label *ngIf="aplicabilidade.edit === true"><input formControlName="context" type="text"></label>
                    </td>

                    <td>
                        <input formControlName="id" type="hidden">
                        <label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.typePaymentDetailsModel }}</label>
                        <label *ngIf="aplicabilidade.edit === true"><input formControlName="typePaymentDetailsModel" type="text"></label>
                    </td>
                    <td> 
                        <label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.typeDeliveryDetailsModels }}</label>
                        <label *ngIf="aplicabilidade.edit === true">
                            <!-- <input formControlName="typeDeliveryDetailsModels" type="text"> -->
                            <mat-form-field>
                                <mat-select multiple formControlName="typePaymentDetailsModel" placeholder="Tipo de Pagamento" name="payment">
                                    <mat-option  *ngFor="let payment of dataSourcePayment" [value]="payment">   
                                    {{payment.name}}            
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>
                        </label>
                    </td>

                    <td> 
                        <label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.marketPlace }}</label>
                        <label *ngIf="aplicabilidade.edit === true"><input formControlName="marketPlace" type="text"></label>
                    </td>

                    <td>
                        <fa *ngIf="checkEdit()" name="pencil" (click)="initEditAplicabilidade(aplicabilidade)"></fa>
                        <fa *ngIf="aplicabilidade.edit === true" name="save" (click)="onUpdate()"></fa>
                    </td>
                    <td>
                        <fa *ngIf="checkEdit()" name="times" (click)="onDelete(aplicabilidade)"></fa>
                        <fa *ngIf="aplicabilidade.edit === true" name="ban" (click)="aplicabilidade.edit = null; initDefaultForm();"></fa>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

My Component

export class ApplicabilityComponent implements OnInit {

  createForm: FormGroup;
  public dataSource: Model.ApplicabilityItem[];
  public dataSourcePayment: Model.TypePaymentItem[];
  public dataSourceDelivery: Model.TypeDeliveryItem[];
  public form:any;

  constructor(private _applicabilityService: ApplicabilityService, 
              private builder: FormBuilder, 
              private route: Router) {}

  ngOnInit() {
    this.onGet();
    this.initDefaultForm();    
  }

  initDefaultForm() {
    this.createForm = this.builder.group({
      id: '',
      name: '',
      context: '',
      typeDeliveryDetailsModels: '',
      typePaymentDetailsModel: '',
      marketPlace: false
    });
  }

  onCreate(){
    this.route.navigate(['create-aplicability']);
  }

  onDelete(aplicabilidade: Model.ApplicabilityItem) {
    debugger;
    if (confirm('Deseja excluir o operador: ' + aplicabilidade.name + '?')) {

      this._applicabilityService
        .delete<any>(aplicabilidade.id)
        .subscribe((res) => {
          this.onGet();
        });
    }
  }

  onGet(){
    this._applicabilityService
      .getAllAplicability<Model.Result<Model.ApplicabilityItem>>()
      .subscribe((data: Model.Result<Model.ApplicabilityItem>) =>{
        this.dataSource = data.itens;
      });

      this._applicabilityService
      .getAllDelivery<Model.Result<Model.TypeDeliveryItem>>()
      .subscribe((data: Model.Result<Model.TypeDeliveryItem>) => {
      this.dataSourceDelivery = data.itens;
    }); 

    this._applicabilityService
    .getAllPayment<Model.Result<Model.TypePaymentItem>>()
    .subscribe((data: Model.Result<Model.TypePaymentItem>) => {
      this.dataSourcePayment = data.itens;
    });

  }

  initEditAplicabilidade(aplicabilidade: any){
    aplicabilidade.edit = true;
    this.createForm = this.builder.group({
      id: aplicabilidade.id,
      name: aplicabilidade.name,
      context: aplicabilidade.context,
      typeDeliveryDetailsModels: aplicabilidade.typeDeliveryDetailsModels,
      typePaymentDetailsModel: aplicabilidade.typePaymentDetailsModel,
      marketPlace: aplicabilidade.marketPlace
    });
  }

  checkEdit() {
    if (this.dataSource == null || this.dataSource.length == 0) return false;
      return this.dataSource.filter((item: any) => item.edit === true).length == 0;
  }

  onUpdate(){
    let formValue = this.createForm.value;
    this._applicabilityService.update<Model.Result<Model.ApplicabilityItem>>(formValue)
    .subscribe(success =>{
        this.onGet();
      },
        error =>{
      } 
    );
  }

}

What I am, when I click edit(Pencil in Form), it opens me the edit screen(This is doing), but if I have Typepayment, as mat-select should come selected. By my code, it should work, but it doesn’t work. I don’t get any error, but the Dropdown does not come with the selected item(s) item(s).

My Model

export interface ApplicabilityItem{
        id: string,
        name: string,
        context: string,
        typePaymentDetailsModel: TypePaymentItem,
        typeDeliveryDetailsModels: TypeDeliveryItem,
        marketPlace: boolean
    }

    export interface TypePaymentItem{
        id: string,
        sgpTypePaymentId: number,
        name: string
    }

    export interface TypeDeliveryItem{
        id: string,
        sgpTypeDeliveryId: number,
        name: string
    }

For Postman, this is an example of Applicability with their complex types:

{
            "id": "3bd8862d-1b15-42fe-9734-426364823ecb",
            "name": "Teste",
            "context": "Texto",
            "typePaymentDetailsModels": [
                {
                    "id": "00dfea8b-4265-42d2-842a-2b854bfcc4dc",
                    "sgpTypePaymentId": 2,
                    "name": "Crédito"
                },
                {
                    "id": "37f0bda4-8661-4339-9c33-3fcbbb2bcd84",
                    "sgpTypePaymentId": 3,
                    "name": "Teste"
                },
                {
                    "id": "200c2e50-468d-46b0-8325-2cb76502c4df",
                    "sgpTypePaymentId": 78,
                    "name": "Novo Teste"
                }
            ],
            "typeDeliveryDetailsModels": [
                {
                    "id": "75c7fdbb-82b7-4e2f-ac03-3696883820f4",
                    "sgpTypeDeliveryId": 1,
                    "name": "Bahia"
                }
            ],
            "marketPlace": true
        }

EDIT1

According to the colleague Eduardo Vargas He guided me, I tried to do as he told me. I did like this: Component

compareValues(c1: Model.ApplicabilityItem, c2: Model.ApplicabilityItem): boolean{
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
  }

Html

<mat-form-field>
   <mat-select multiple [compareWith]="compareValues" formControlName="typePaymentDetailsModel" 
       placeholder="Tipo de Pagamento" name="payment" >
       <mat-option  *ngFor="let payment of dataSourcePayment" [value]="payment">   
            {{payment.name}}            
       </mat-option>
   </mat-select>
</mat-form-field>

and continues to dropdown on Edit coming without the selected items.

Answer 1

You have to use mat-select function compareWIth

<mat-select multiple formControlName="typePaymentDetailsModel" placeholder="Tipo de Pagamento" name="payment" [compareWith]="comapreValues">
   <mat-option  *ngFor="let payment of dataSourcePayment" [value]="payment">   
        {{payment.name}}            
   </mat-option>
</mat-select>

Ai in its component add the respective function

compareValues(value1: any, value2: any): boolean {
    return value1.id=== value2.id; //adicione sua logica aqui
}