Question

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

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

  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>

当我选择值时，“选择的”属性会核心地更新值，并且此值会出现在选择输入中，，但是当我单击“重置选项”按钮时，“选择的”属性仍会保留其值，但该值从选择输入中消失。

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'}
];

尝试上面的代码片段，希望对您有所帮助。谢谢

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

1 个答案: