Question

我正在使用角度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。

我们如何解决这个问题？

Answer 1

您应该使用值

[value]="eachBook"

Answer 2

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

根据文档：

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

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

例如，在app.module.ts中：

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

// ...

imports: [
    FormsModule,
    ...
]

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

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

4 个答案: