垫自动完成功能使用补丁值方法显示所选值

Question

我正在使用Angular6。我正在使用垫子自动完成功能。我需要显示从api调用检索的数据中选择的自动完成值。在同一屏幕上，我还必须提供其他自动完成的空白字段。这是我的代码：

                <mat-form-field fxFlex="25%">
                  <input [formControl]="ProductCtrl" matInput placeholder="Product Name" [matAutocomplete]="product1"
                    formControlName="Product" />
                  <mat-autocomplete #product1="matAutocomplete" (optionSelected)="productSelected($event,i)"
                    [displayWith]="displayProduct">
                    <mat-option *ngFor="let product of productData$ | async" [value]="product">
                      <span>{{product.ProductName}} {{product.Size}} {{product.Color}} {{product.Weight}}</span>
                    </mat-option>
                  </mat-autocomplete>
                </mat-form-field>

我已使用以下代码修补了值

 setFormArrayValue() {
    for (let i = 0; i < this.numberofForm; i++) {
      let test :IProduct= {  ProductId: this.dishes.IngredientInformation[i].ProductId,
          ProductName:"",
          ProductVariationId: this.dishes.IngredientInformation[i].ProductVariationId,
          Size:  this.dishes.IngredientInformation[i].Size,
          Color:this.dishes.IngredientInformation[i].Color,
          Weight:this.dishes.IngredientInformation[i].Weight,
          IsVatable: false}
         const ingredient = this.fb.group({
          IngredientId: new FormControl(this.dishes.IngredientInformation[i].IngredientId),
           ProductVariationId: new FormControl(this.dishes.IngredientInformation[i].ProductVariationId),
           ProductId: new FormControl(this.dishes.IngredientInformation[i].ProductId),
           Product: new FormControl(test),     
         })
         this.multipleform.push(ingredient);
       }
     }

在.ts文件中，它使用以下功能显示。

displayProduct(product: IProduct): string | undefined {

  return product ? (product.ProductName + "   "
      + (product.Size ? product.Size : "") + " "
      + (product.Color ? product.Color : "") + " "
      + (product.Weight ? product.Weight : "")) : undefined;

}

在调试一次displayProduct（）时会为数据调用两次。第一次调用时，将填充有效数据并在视图中显示结果。但是立即调用具有空值的函数，显示的结果将消失。