md-input的angular-material2占位符不在焦点上移动

时间:2016-05-13 06:11:09

标签: angular angular-material

我正在使用angular-material2。我使用带占位符的md-input,如下所示:

<md-input placeholder="Username"></md-input>

当我开始在文本框中输入一些值时,占位符正在消失,而不是像文档中给出的那样向上移动。
下面是我的package.json:

{
  "name": "angular2-boilerplate",
  "version": "1.0.0",
  "scripts": {
    "lite": "lite-server",
    "gulp": "gulp",
    "start": "concurrent \"npm run gulp\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "@angular2-material/button": "^2.0.0-alpha.2",
    "@angular2-material/checkbox": "^2.0.0-alpha.2",
    "@angular2-material/core": "^2.0.0-alpha.2",
    "@angular2-material/progress-circle": "^2.0.0-alpha.2",
    "@angular2-material/toolbar": "^2.0.0-alpha.2",
    "@angular2-material/input": "^2.0.0-alpha.2",
    "@angular2-material/card": "^2.0.0-alpha.2",
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.7",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.5",
    "cssnano": "^3.4.0",
    "concurrently": "^2.0.0",
    "gulp": "^3.9.0",
    "gulp-ext-replace": "^0.2.0",
    "gulp-imagemin": "^2.4.0",
    "gulp-postcss": "^6.0.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-typescript": "^2.10.0",
    "gulp-uglify": "^1.5.1",
    "lite-server": "^2.1.0",
    "postcss": "^5.0.13",
    "postcss-scss": "^0.1.3",
    "precss": "^1.3.0"
  }
}

systemjs.config.js:

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular',
    '@angular2-material':     'node_modules/@angular2-material'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'boot.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    '@angular2-material/core': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'core.js'
     },
     '@angular2-material/checkbox': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'checkbox.js'
      },

     '@angular2-material/button': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'button.js'
      },
      '@angular2-material/toolbar': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'toolbar.js'
      },
      '@angular2-material/card': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'card.js'
      },
     '@angular2-material/input': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'input.js'
      }
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

我在这里做错了什么? 文档还有一个区别: 当我给出颜色时:&#34; primary&#34;,它呈现绿色。但根据文档(https://www.npmjs.com/package/@angular2-material/input),它应该是蓝色。

0 个答案:

没有答案