2017-03-08 75 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輸入接收器中。檢查一下。 –