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

更新：我现在已经使两者完全相同。我的npm run lite和Plunker版本的本地版本是100％相同的，但我的本地版本没有获得占位符文本。mdInput的占位符文本不可见（Angular2的材料设计）

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

我注意到占位符文本是不可见的，除非我添加像input::-webkit-input-placeholder{ color:black;}这样的css，但是当用户在字段中单击时（动画开始时将其移动到输入上方浮动时）它不会消失，用户开始输入时消失。

然后，我拉开我的非常大的应用程序尽可能最小的例子，所以我可以发布一个这样的笨蛋。本地运行的版本和Plunker版本现在是100％相同的。

那么为什么Plunker的例子工作，但不是我的本地版本？

这里是所有分歧（更新后，没有分歧依然存在Plunker和本地版本之间。）：

app.component.ts：（移动的文件出子目录和直接服务，不从build文件夹Plunker和地方现在identcal）

的index.html：（更新等等这些都是现在相同，问题依然存在）

systemjs.config.js：（已更新，所以这些现在是相同的。将组件移到根目录以匹配Plunker。问题仍然是）在我的文件

包部分：。（更新所以他们现在一样）

完全plunker文件：

app.component.html：

<div> 

<md-input-container> 
    <input mdInput placeholder="Favorite food"> 
</md-input-container> 

<div>

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app', 
    templateUrl:'./app.component.html' 
}) 
export class AppComponent { 

}

个

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import {MaterialModule } from '@angular/material'; 
import { AppComponent } from './app.component'; 


@NgModule({ 
    imports:  [ 
    BrowserModule, 
    HttpModule, 
    MaterialModule, 
    ], 
    declarations: [ 

    AppComponent 

    ], 
    providers: [ 

    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

的index.html

<!DOCTYPE html> 
<html> 
<head> 

    <title>Test</title> 
    <meta charset="UTF-8"> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.0.3/typescript.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> 


    <script src="systemjs.config.js"></script> 

    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 

    <link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet"> 

</head> 

    <body> 
    <app>Loading...</app> 
    </body> 
</html>

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppModule } from './app.module'; 

const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule) 
    .then(success => console.log("Bootstrap success")) 
    .catch(err => console.log(err));

systemjs.config 。JS

(function (global) { 
    System.config({ 
    transpiler: 'typescript', 
    typescriptOptions: { 
    emitDecoratorMetadata: true 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     'app':'.', 
    // Angular specific mappings. 
    '@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js', 
    '@angular/common': 'https://unpkg.com/@angular/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/@angular/forms/bundles/forms.umd.js', 
    '@angular/router': 'https://unpkg.com/@angular/router/bundles/router.umd.js', 
    '@angular/platform-browser': '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', 
    '@angular/material': 'https://unpkg.com/@angular/material/bundles/material.umd.js', 

    // Rxjs mapping 
    'rxjs': 'https://unpkg.com/rxjs',  

    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.ts', 
     defaultExtension: 'ts' 
     }, 
     '.': { 
     defaultExtension: 'ts' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this);

来源

2017-03-07 WillyC

OK - 回答我的问题的情况下，其他一些贫穷的人运行到这一点。

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

在我的index.html文件的顶部，我需要这样的：

<!DOCTYPE html>

我发现这同时创造一个GitHub库共享和显示问题。

我知道这是必需的 - 我只是感到惊讶我得到了这么多，这是我遇到的唯一问题。烧了这一天！希望我救了另一个人从相同的命运...

来源

2017-03-08 00:44:06 WillyC

嗨..你能标记为答案？这是正确的答案！谢谢！ – mariomol

是的！对不起 - 完成 – WillyC

这个问题也发生，如果你不包括动画模块，就像在this thread（以防万一别人到这里，上述解决方案不解决问题）。

来源

2017-07-04 15:29:05

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

回答

相关问题