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的材料設計）

回答

相關問題