Angular Material Mat-select无法正常工作

Question

我正在尝试使用最新的Angular材料。 我在mat-select组件上遇到了困难。 这是我的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元素中没有选择值，它是空白的。但当我在浏览器中尝试检查时，所需元素存在，但在UI中隐藏了。

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

这里可能有什么遗漏，可以有人帮忙吗？

- Roshan Sharma

---

你从示例中正确地复制了 component.ts 文件吗？ - Wandrille

@Wandrille 是的，我已经正确复制了它，除了食品清单以外没有什么特别的。 - Roshan Sharma

@Igor 我也尝试了那个方法，但是没有起作用。 - Roshan Sharma

当我选择一个选项时，mat-select元素中没有选择值<=您是如何进行选择的？您指的是在后台的代码（.ts文件）中进行选择还是通过浏览器与控件进行交互？ - Igor

@Igor，它在浏览器中。看起来像是有些东西使它隐藏了，但我无法弄清楚。 - Roshan Sharma

Answer 1

在组件中需要读取所选值，不要尝试解析HTML以查找它。使用[(selectedLevel)]绑定值，因此你的组件中的selectedLevel具有该选择框的所选值。

请参见stackblitz

---

select-overview-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;
  }
}

- Igor

Answer 2

我猜测您创建食品列表时，密钥与您在视图中使用的不匹配...例如，如果您像以下方式创建了食品列表，则会复制您所描述的问题。

最初的回答: 我怀疑当你创建食品列表时，键值与你在视图中使用的不匹配...例如，如果你像下面这样创建食品列表，它将会复制你所描述的问题。

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

原因是，你的视图期望 food.value 但是没有 food.value 键，只有 food.id 键。

仔细检查你创建食品数组的方式，并确保键与你在视图中使用的相匹配。

- Marshal