Angular2稳定版

Question

我在将angular2应用升级到稳定版本时遇到了常见错误，但所提到的解决方案都没有对我有用（这几乎是一种普遍存在的解决方案）。 这是它：

Template parse errors:
Can't bind to 'placeholder' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'placeholder' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

我已尝试根据此solution1和此solution2（相同）导入FormsModule，但仍会出现相同的错误。还有其他解决方案吗？

HTML：

  <div class="col-lg-10 col-lg-offset-1">
      <div class="md-block">
        <md-input
          id="name"
          [ngModel]="xyzStuff?.xyz_name"
          placeholder="{{'xyzName' | translate}}"
          formControlName="name"
          dividerColor="{{getDividerColor(xyzForm.controls.name)}}"
        >
        </md-input>
      </div>
    </div>

和Module file：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { UIRouterModule } from 'ui-router-ng2';
import { TranslateModule } from 'ng2-translate';

import { ParComponent } from './par.component';
import { XyzSettingsComponent } from './shared/xyz-settings/xyz-settings.component';

@NgModule({
  declarations: [
    ParComponent,
    XyzSettingsComponent
  ],
  imports:       [
    FormsModule,
    BrowserModule,
    UIRouterModule,
    TranslateModule,
    ReactiveFormsModule
  ],
  providers:     [],
  exports:       [
    FormsModule,
    BrowserModule,
    UIRouterModule,
    TranslateModule,
    ReactiveFormsModule
  ]
})
export class ParModule {}

任何帮助？

Answer 1

md-input属于angular2素材项目。 Angular 2 Material是完全不同的插件。您必须确保导入MaterialModule导入并注入imports NgModule选项import { MaterialModule } from '@angular/material'; @NgModule({ declarations: [ ... ], imports: [ ..., MaterialModule.forRoot(), //<-- imported material module here ... ], providers: [], exports: [ ... ] }) 。

MaterialModule

我强烈建议您浏览Getting started page Angular2 material

  

注意：   确保您应在要使用Angular 2 material组件的模块组件中导入<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <div ng-controller="FooController"> <ul ng-repeat="item in keys() | orderBy:'-key'"> <li>{{item.key}} :: {{item.value}}</li> </ul> </div> </div> 。