角垫自动完成-动态添加项目问题

Question

我正在尝试创建一个具有动态数量的mat-autocomplete字段的简单表单。但是，在某些情况下，输入的显示值会丢失。

Component code
 dropdown = [{

      "name":'',
      "items": [{name: 'item1'}]
  }]
 availableItems = [{name: 'item1'}, {name: 'item2'}];


  addItem() {
    this.dropdown.push({"name":'',items:[{"name":""}]});
  }

Html Code

 <ng-container *ngFor="let values of dropdown;let j = index" >

         <input type="text" name="tes" [(ngModel)]="values.name" value="">
<mat-form-field *ngFor="let item of values.items; let i = index;trackBy:customTrackBy">
        <input matInput [(ngModel)]="values.items[i]" [matAutocomplete]="itemAutocomplete"
                     name="values.items[{{i}}]">

    <mat-autocomplete #itemAutocomplete="matAutocomplete" [displayWith]="displayObject">
            <mat-option *ngFor="let item of availableItems" [value]="item">{{item.name}}      </mat-option>
        </mat-autocomplete>

    <button mat-button mat-icon-button matSuffix type="button" (click)="deleteItem(j)"><mat-icon>close</mat-icon></button>
  </mat-form-field>


  <button class="btnType01" mat-raised-button type="button" (click)="addItem()"><mat-icon>add</mat-icon>Add Item</button>
  </ng-container>