垫选择与垫标签重叠

Question

我对野生动物园的问题是mat-label与mat-select值重叠了。

我正在使用名为foods的数组，并用它来打印值并使用foodValue来更改mat select中的值

因此，如果在数组foods中插入并同时更改值foodValue，则会发生问题

我使用Angular Material Docs中文档的相同代码 并在文件select-overview-example.ts中进行编辑 并添加

    setInterval(() => {
      console.log("here", this.foodValue, this.foods);
      this.foodValue = this.foods[this.i % this.foods.length].value;
      this.foods.push({value: 'tacos-2' + this.i, viewValue: 'Tacos' + this.i});
      this.i++;
    }, 400); 

添加到foods数组中并更新foodValue

组件

import {Component} from '@angular/core';

export interface Food {
  value: string;
  viewValue: string;
}

/**
 * @title Basic select
 */
@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  foodValue;
  i = 0;
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  constructor() {
    setInterval(() => {
      console.log("here", this.foodValue, this.foods);
      this.foodValue = this.foods[this.i % this.foods.length].value;
      this.foods.push({value: 'tacos-2' + this.i, viewValue: 'Tacos' + this.i});
      this.i++;
    }, 400); 
  }

}


/**  Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

<mat-form-field class="w-100">
  <mat-label>Favorite food</mat-label>
  <mat-select [(value)]="this.foodValue">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

使用链接，请下载源代码，然后使用野生动物园 https://stackblitz.com/edit/angular-buq6rw?embed=1&file=app/select-overview-example.ts&view=preview

我希望mat-label不会与mat-select重叠