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