角材料選擇 - 顯示選定值的問題

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

試試上面的代碼片段，我希望它會幫助你。 謝謝