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

Question

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

Can't bind to 'ngValue' since it isn't a known property of '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]="eachBook"

Answer 2

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

Answer 3

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

根据文档：

If you have imported the FormsModule or the ReactiveFormsModule, this value accessor will be active on any select control that has a form directive. You do not need to add a special selector to activate it.

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

例如，在app.module.ts中：

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

// ...

imports: [
    FormsModule,
    ...
]

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