Угловой материал Mat-Select не работает должным образом

Question

Я пытаюсь использовать новейший угловой материал.Я застрял в компоненте выбора мата.Вот мой HTML.

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

Параметры заполняются правильно, но когда я выбираю один параметр, в элементе mat-select значение выбора отсутствует, оно пустое.Но когда я пытался проверить в браузере, требуемый элемент существует, когда он был скрыт в пользовательском интерфейсе

<span class="ng-tns-c4-1 ng-star-inserted">Steak</span>

Что может быть здесь не хватает, кто-нибудь, можете ли вы мне помочь?

Answer 1

Я подозреваю, что когда вы создали свой список продуктов, ключ не соответствует тому, что вы используете в представлении ... например, если вы создали список продуктов, как показано ниже, он будет повторять проблему, которую вы описываете.

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

Причина в том, что ваш взгляд ожидает food.value, но нет клавиши food.value, только клавиша food.id.

Дважды проверьте способ создания массива продуктов,и убедитесь, что ключи соответствуют тому, что вы используете в представлении.

Answer 2

Вам нужно прочитать выбранное значение обратно в компоненте, не пытайтесь анализировать HTML, ища его. Вы связываете значение, используя [(selectedLevel)], поэтому selectedLevel в вашем компоненте имеет выбранное значение этого выбора.

См. stackblitz

---

выберите-обзор-example.html

<h4>Basic mat-select</h4>
<mat-form-field>
  <mat-select placeholder="Favorite food" name="foods" [(value)]="selectedFood">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>
<p>Selected food = {{selectedFood}}</p>

<h4>Basic mat-select with ngModel</h4>
<mat-form-field>
  <mat-select placeholder="Favorite food" name="foods2" [(ngModel)]="selectedFoodModel">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

<p>Selected food = {{selectedFoodModel}}</p>

component.ts

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

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

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample implements OnInit {
  selectedFood: string;
  selectedFoodModel: string;
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  ngOnInit(){
    this.selectedFood = this.foods[1].value;
    this.selectedFoodModel = this.foods[1].value;
  }
}