How to avoid data display error in dropdown list in duplicated TDforms?

Question

Angular

There is the following form:

<mat-input-container class="input-block">
              <input matInput
                     placeholder="Количество"
                     name="number"
                     [(ngModel)]="count"
                     #number="ngModel"
                     (ngModelChange)="addForms()"
                     type="number">
</mat-input-container>
<mat-expansion-panel [expanded]="false" *ngFor="let title of titles; let i = index">
            <mat-expansion-panel-header>
              <mat-panel-title>Форма {{ i + 1 }}</mat-panel-title>
            </mat-expansion-panel-header>
            <mat-form-field class="input-block">
              <mat-select placeholder="Наименование"
                          name="title{{i + 1}}"
                          #title="ngModel"
                          [(ngModel)]="title.model">
                <ngx-mat-select-search name="modelFilterByTitle"
                                       #modelFilterByTitle="ngModel"
                                       ngModel></ngx-mat-select-search>
                <mat-option *ngFor="let model of filteredModels$ | async" [value]="model">
                  {{model.name}}
                </mat-option>
              </mat-select>
</mat-form-field>

from the ts side it looks like this:

count: number;
titles = [];

addForms() {
    this.titles = [];

    for (let i = 1; i <= this.count; i++) {
      this.titles.push({
        model: modelModel,
      });
    }
  }

What is the essence: in the Quantity field, a number is entered, for example 3, the titles array is automatically generated and three panels with selects are duplicated, the search is performed by the select. And now, if there is no problem in the first select - I found it, chose it, after the selection the selected one was displayed in the select, then there are already problems with the second, third, etc., I select the item - it is shown in the select for a second, and disappears. But! At the same time, if you display the titles array, then everything is entered correctly. That is, the number and data about the model correspond to the one selected in the select. How to solve the problem with the disappearance of the name of the duplicated selects?

Answer 1

Helped elsewhere, the answer was covered in compareWith https://v5.material.angular.io/components/select/api
Maybe it will come in handy for someone, I'll mark it as a solution.