mdInput不可見的占位符文本（Angular2的材質設計）

Question

更新：我現在使兩者完全相同。 我的本地版本與npm run lite一起提供，而Plunker版本100％相同，但是我的本地版本未獲得占位符文本。

我有一個大型的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和local現在是相同的）

index.html ：（已更新，因此現在相同，問題仍然存在）

systemjs.config.js ：（已更新，因此現在它們相同。將組件移至根目錄以匹配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);

Answer 1

好-如果有其他可憐的人遇到這個問題，請回答我自己的問題。

我錯過了兩者之間的一件事。 在其他情況下沒有任何區別的一件事，我能找到的唯一症狀是我沒有在mdInput上獲得占位符文本。

在index.html文件的頂部，我需要這樣做：

<!DOCTYPE html>

我在創建github存儲庫以共享和顯示問題時發現了這一點。

我知道這是必需的-我感到很驚訝，這是我遇到的唯一問題。 燒了一天！ 希望我能從同樣的命運中拯救另一個人。

Answer 2

如果您不包括動畫模塊（例如在此線程中），也會發生此問題（以防萬一其他人到達此處並且上述解決方案無法解決問題）。

mdInput不可見的占位符文本（Angular2的材質設計）

問題描述

2 個解決方案

解決方案1
3 已采納 2017-03-08 00:44:06

解決方案2
1 2017-07-04 15:29:05

mdInput不可見的占位符文本（Angular2的材質設計）

問題描述

2 個解決方案

解決方案1 3 已采納 2017-03-08 00:44:06

解決方案2 1 2017-07-04 15:29:05

解決方案1
3 已采納 2017-03-08 00:44:06

解決方案2
1 2017-07-04 15:29:05