占位符文本对于mdInput不可见（Angular2的材质设计）_Angular_Angular Material2

占位符文本对于mdInput不可见（Angular2的材质设计）

angular

占位符文本对于mdInput不可见（Angular2的材质设计）,angular,angular-material2,Angular,Angular Material2,更新：我现在将两者完全相同。我的本地版本与npm run lite和Plunker版本100%相同，但我的本地版本没有占位符文本我有一个大型Angular2（2.4.9）应用程序，我开始使用Google的@angular/material（2.0.0-beta.2）——特别是他们的mdInput 我注意到占位符文本是不可见的，除非我添加css，如输入：：-webkit输入占位符{color:black；}，但是当用户单击字段时它不会消失（当动画开始将其移动到输入上方时），它只在用户开始键入时消

更新：我现在将两者完全相同。我的本地版本与npm run lite和Plunker版本100%相同，但我的本地版本没有占位符文本

我有一个大型Angular2（2.4.9）应用程序，我开始使用Google的@angular/material（2.0.0-beta.2）——特别是他们的mdInput

我注意到占位符文本是不可见的，除非我添加css，如

输入：：-webkit输入占位符{color:black；}

，但是当用户单击字段时它不会消失（当动画开始将其移动到输入上方时），它只在用户开始键入时消失

然后，我将我的大型应用程序拆开，以获得尽可能少的示例，这样我就可以发布一个这样的插件。本地运行的版本和Plunker版本现在100%相同

那么，为什么Plunker示例有效，而我的本地版本无效呢

以下是所有差异（更新后，Plunker和本地版本之间没有差异）：

应用程序组件.ts：（将文件移出子目录并直接提供，而不是从构建文件夹提供。Plunker和local现在是相同的）

index.html：（进行了更新，使它们现在相同，问题仍然存在）

systemjs.config.js：（已更新，使它们现在相同。已将组件移动到根目录以匹配Plunker。问题仍然存在。）

“我的文件”中的“包”部分：（已更新，因此它们现在完全相同。）

完整plunker文件：

app.component.html：

应用程序组件.ts

从'@angular/core'导入{Component}；
@组成部分({
选择器：“应用程序”，
templateUrl:“./app.component.html”
})
导出类AppComponent{
}

应用程序模块.ts

从'@angular/core'导入{NgModule}；
从“@angular/platform browser”导入{BrowserModule}；
从'@angular/http'导入{HttpModule}；
从“@angular/material”导入{MaterialModule}；
从“./app.component”导入{AppComponent}；
@NGD模块({
进口：[
浏览器模块，
HttpModule，
材料模块，
],
声明：[
应用组件
],
供应商：[
],
引导：[AppComponent]
})
导出类AppModule{}

index.html


试验
System.import（'app'）.catch（函数（err）{console.error（err）；}）；
加载。。。

main.ts

从'@angular/platformBrowserDynamic'导入{platformBrowserDynamic}；
从“./app.module”导入{AppModule}；
const platform=platformBrowserDynamic（）；
platform.bootstrapModule（AppModule）
.then（success=>console.log（“引导成功”））
.catch（err=>console.log（err））；

systemjs.config.js

（功能（全局）{
System.config({
transpiler:'typescript'，
类型脚本选项：{
emit-decorormatadata：对
},
//地图告诉系统加载器在哪里查找东西
地图：{
“应用程序”：”，
//角度特定映射。
“@angular/core”：”https://unpkg.com/@角度/core/bundles/core.umd.js'，
“@angular/common”：”https://unpkg.com/@角度/common/bundles/common.umd.js'，
“@angular/compiler”：”https://unpkg.com/@angular/compiler/bundles/compiler.umd.js'，
“@angular/http”：”https://unpkg.com/@angular/http/bundles/http.umd.js'，
“@angular/forms”：”https://unpkg.com/@角度/forms/bundles/forms.umd.js'，
“@angular/router”：”https://unpkg.com/@angular/router/bundles/router.umd.js'，
“@角度/平台浏览器”：”https://unpkg.com/@angular/platform browser/bundles/platform browser.umd.js'，
“@angular/platform browser dynamic”：”https://unpkg.com/@angular/platform browser dynamic/bundles/platform browser dynamic.umd.js'，
“@角度/材质”：”https://unpkg.com/@角度/材料/束/材料.umd.js'，
//Rxjs映射
‘rxjs’：’https://unpkg.com/rxjs',      
},
//包告诉系统加载程序在没有文件名和/或扩展名时如何加载
套餐：{
应用程序：{
main:“./main.ts”，
defaultExtension:'ts'
},
'.': {
defaultExtension:'ts'
},
rxjs:{
defaultExtension:'js'
}
}
});
})（本条）；

好的-回答我自己的问题，以防其他穷人遇到这个问题

我在两者之间错过了一件事。有一件事在任何其他情况下都没有区别，我能找到的唯一症状是我没有在mdInput上获取占位符文本

在index.html文件的顶部，我需要以下内容：

<!DOCTYPE html>

我在创建github repo以共享和显示问题时发现了这一点

我知道这是必须的——我只是很惊讶我走了这么远，这是我遇到的唯一问题。在这上面烧了一天！希望我能从同样的命运中拯救另一个人…

好的-回答我自己的问题，以防其他穷人遇到这种情况

我在两者之间错过了一件事。有一件事在任何其他情况下都没有区别，我能找到的唯一症状是我没有在mdInput上获取占位符文本

在index.html文件的顶部，我需要以下内容：

<!DOCTYPE html>

我在创建github repo以共享和显示问题时发现了这一点

我知道这是必须的——我只是很惊讶我走了这么远，这是我遇到的唯一问题。在这上面烧了一天！希望我能拯救另一个人免于同样的命运…

如果您不包括动画模块，也会发生此问题，如中（以防万一其他人来到这里，上述解决方案无法解决此问题）。

如果您不包括动画模块，也会发生此问题，如中（以防万一有人到了这里和上面的解决方案