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

Question

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

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

我的模板如下所示：

  <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 。

我们如何解决这个问题？

Answer 1

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

根据文档：

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

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

例如，在app.module.ts ：

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

// ...

imports: [
    FormsModule,
    ...
]

Answer 2

你应该使用价值

[value]="eachBook"

Answer 3

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

Answer 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 的字符串表示。