Angular - 无法绑定到“ngValue”，因为它不是“mat-option”的已知属性答案

【问题标题】：Angular - Can't bind to 'ngValue' since it isn't a known property of 'mat-option'Angular - 无法绑定到“ngValue”，因为它不是“mat-option”的已知属性
【发布时间】：2018-02-14 07:58:20
【问题描述】：

我正在使用 Angular 5，但出现控制台错误：

无法绑定到“ngValue”，因为它不是 '垫选项'

我的模板如下所示：

  <mat-select placeholder="Select Book" name="patient" [(ngModel)]="selectedBook">
     <mat-option *ngFor="let eachBook of books" [ngValue]="eachBook">{{eachBook.name}}</mat-option>
  </mat-select>

我已经导入了 MatSelectModule 和 MatOptionModule。

我们如何解决这个问题？

【问题讨论】：

标签： angular angular5

【解决方案1】：

接受的答案不是解决方案，而是解决方法，因为 value 和 [ngValue] 用于不同的目的。 value 可用于简单的字符串值，而[ngValue] 是支持非字符串值所必需的。

根据文档：

如果您已导入 FormsModule 或 ReactiveFormsModule，则此值访问器将在任何具有表单的选择控件上处于活动状态指示。您无需添加特殊选择器即可激活它。

如果您收到此错误，您很可能需要将 FormsModule 或 ReactiveFormsModule 导入您的应用程序。

例如在app.module.ts:

import { FormsModule } from '@angular/forms';

// ...

imports: [
    FormsModule,
    ...
]

【讨论】：

对于 Mat-Option 并且我相信其他 Angular 材质组件，[value] 确实适用于对象并且不需要 ngValue。
@Alex Gah 为什么他们不能保持名称不变或给他们起别名之类的......

【解决方案2】：

你应该使用价值

[value]="eachBook"

【讨论】：

我想使用 ngValue 而不是 value 这是 angular docs 推荐的。如何使用ngValue ？
作为标记回答值和 [ngValue] 用于不同目的
如果值不是字符串，则需要使用 [ngValue]。有什么办法可以使用材料选择框和 [ngValue]？
对于 Mat-Option 并且我相信其他 Angular 材质组件，[value] 确实适用于对象并且不需要 ngValue。
你不应该使用[value]，因为有时你需要[ngValue]，如何接受？

【解决方案3】：

我遇到了同样的问题。我的解决方案是导入“ReactiveFormsModule”。所以你可以使用[ngValue]来绑定一个对象。

【讨论】：

【解决方案4】：

对于 mat-autocomplete，使用项目而不是字符串，对于 mat-option，ngValue 不可用，但是使用 [value]，我们可以通过使用 option.value 而不是 option.viewValue 来访问对象：

allFruits: Item[] = [
    {
      name: 'hello',
      selected: true,
    },
    {
      name: 'world',
      selected: false,
    }
  ];


<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit.name}} {{fruit.selected}}
    </mat-option>
  </mat-autocomplete>


selected(event: MatAutocompleteSelectedEvent): void {
    console.log('selected ', event.option.value); <----- THIS
    console.log('selected ', event.option.viewValue); <---- NOT THIS
}

使用 option.value 你得到对象。使用 option.viewValue，您将获得用户看到的 innerHTML 的字符串表示形式。

【讨论】：