Material 设计灯 mdl-select

Question

我正在尝试在 Angular 应用程序中使用 mdl-select 组件。

<form [formGroup]="form">
  <mdl-select formControlName="personId">
    <mdl-option *ngFor="let p of people" [value]="p.id">{{p.name}}</mdl-option>
  </mdl-select>
</form>

我使用此处的说明进行安装：https://github.com/mseemann/angular2-mdl-ext/tree/master/src/components/select

出现此控制台错误：

Unhandled Promise rejection: Template parse errors:
Can't bind to 'value' since it isn't a known property of 'mdl-option'.
1. If 'mdl-option' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'mdl-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("tiple="true" placeholder="Select users">
        <mdl-option mdl-ripple *ngFor="let hero of heroes" [ERROR ->][value]="hero.name">{{hero.name}}</mdl-option>
      </mdl-select>

"): ng:///AppModule/NewEventComponent.html@19:59

Answer 1

您的问题是您没有导入模块属性，因为它需要在您的根 app.module.ts.

中引导

从您的自定义组件中取出 import { MdlSelectModule } from '@angular-mdl/option'，并将其移至 app.module.ts。此外，将 MdlSelectModule 添加到 app.module.ts

中的 imports: [] 数组

Material 设计灯 mdl-select

Material design light mdl-select

angularjs

material-design-lite