我正在使用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),它应该是蓝色。