2017-03-08 112 views
2

我在这里错过了什么? md-input是否应单独加载到module文件中?角度材料2:'md-input'不是已知元素

这工作:

<md-input-container> 
    <input mdInput name="username" placeholder="Username" [(ngModel)]="username" #name="ngModel" required>   
</md-input-container> 

然而,这种失败:

<md-input placeholder="amount" align="end"> 
    <span md-prefix>$&nbsp;</span> 
    <span md-suffix>.00</span> 
</md-input> 

,出现以下错误:

Unhandled Promise rejection: Template parse errors: 
'md-input' is not a known element: 
1. If 'md-input' is an Angular component, 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. (" 
    </div> 
    <div> 
    [ERROR ->]<md-input placeholder="amount" align="end"> 
     <span md-prefix>$&nbsp;</span> 

app.module.ts

import { NgModule }  from '@angular/core'; 
import { CommonModule } from "@angular/common"; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from "@angular/forms"; 
import { MaterialModule } from "@angular/material"; 

import { AppComponent } from './app.component'; 

import "hammerjs"; 

@NgModule({ 
    imports:  [ 
    CommonModule, 
    BrowserModule, 
    FormsModule, 
    MaterialModule.forRoot() 
    ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

回答

3

那是因为你的第二个例子中,语法错误。使用最后的2.0.0 beta.1(我想你正在使用)md-input关键字被替换为mdInput。所以,如果你渴望与角料2风格的输入只需键入

<md-input-container> 
    <input mdInput placeholder="Username" name="username"> 
</md-input-container> 
0

我想你的错误指定你的前缀和后缀。据https://material.angular.io/components/component/input

Prefix and Suffix

HTML can be included before, and after the input tag, as prefix or suffix. It will be underlined as per the Material specification, and clicking it will focus the input.

Adding the mdPrefix attribute to an element inside the md-input-container will designate it as the prefix. Similarly, adding mdSuffix will designate it as the suffix.

而不是使用md-prefixmd-suffix

<md-input placeholder="amount" align="end"> 
    <span md-prefix>$&nbsp;</span> 
    <span md-suffix>.00</span> 
</md-input> 

尝试使用mdPrefixmdSuffix并在md-input-container它包装:

<md-input-container> 
    <input mdInput placeholder="amount" align="end"> 
    <span mdPrefix>$&nbsp;</span> 
    <span mdSuffix>.00</span> 
</md-input-container> 
+0

试过了,同样的错误:“未处理的承诺拒绝:模板解析错误: ‘MD-输入’不是一个已知的元素:” – kmansoor

+0

对不起,我没有把它包装在一个MD输入接收器中。检查一下。 –