角材料选择 - 显示选定值的问题

Question

我使用角材料选择： https : //material.angular.io/components/select/examples

在我的应用程序中，我使用了很多选择输入，并且它们都在它们之间共享了选项数组。 选项数组示例：

  foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'}];

我的问题是：当我选择任何值然后我重置我的选项数组时，例如单击按钮，然后选择的值从所有选择的输入中消失。

当我重置选择选项数组或将新值显式放入选项数组时，是否有任何方法可以使所选值在选择输入上可见？

编辑：

为了更清楚，让我们考虑以下代码：

TS文件：

foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'}];

selected = 'pizza-1';

resetOptions() {
    this.foods = [];
}

HTML：

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

<p>{{selected}}</p>

<button (click)="resetOptions()">Reset Options</button>

当我选择值时，'selected' 属性会正确地更新值并且该值出现在选择输入上，但是当我单击“重置选项”按钮时，'selected' 属性仍然保持其值，但该值从选择输入中消失。

Answer 1

HTML

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

TS

selected = 'pizza-1';

foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
];

试试上面的代码片段，我希望它会帮助你。 谢谢