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元素中没有选择值，该值为空白。但是当我尝试在浏览器中检查时，所需的元素在隐藏在UI中时存在

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

这里可能缺少什么，任何人都可以帮助我吗？

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

Answer 2

我怀疑您在创建食物清单时，该键与您在视图中使用的键不匹配...例如，如果您创建了如下所示的食物清单，它将复制您正在描述的问题。 / p>

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

原因是，您的视图需要food.value，但是没有food.value键，只有food.id键。

再次检查创建食物数组的方式，并确保键与您在视图中使用的键匹配。

角材料垫选择无法正常工作

2 个答案: