【问题标题】:Error while using md-input-container使用 md-input-container 时出错
【发布时间】:2017-05-03 04:20:39
【问题描述】:

我根据链接 https://github.com/angular/material2/blob/master/GETTING_STARTED.md 创建了一个 Angular 2 材质应用程序。

我可以使用<md-card>, <md-toolbar>, <md-input> 等。但是当我使用<md-input-container> 时,它会抛出错误

zone.js:388 Unhandled Promise rejection: Template parse errors:
'md-input-container' is not a known element:

这是 packages.json 的详细信息,

"dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/material": "^2.0.0-alpha.11-3",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "ng2-file-upload": "^1.1.4-2",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },

我该如何解决这个问题?

https://github.com/angular/material2/tree/master/src/lib/input 表示不推荐使用 md-input 并使用 md-input-container。

【问题讨论】:

    标签: angular angular-material2


    【解决方案1】:

    这对我有用。

    app.module.ts

    import { MaterialModule } from '@angular/material';
    ...
    @NgModule({
    imports: [
    MaterialModule
    ]
    })
    

    app.component.html

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

    这里的关键是确保将其添加到 index.html 的头部。

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    

    【讨论】:

      【解决方案2】:

      我认为它可能还行不通,因为那些changes 还没有进入2.0.0-alpha.11 版本。

      https://github.com/angular/material2/compare/2.0.0-alpha.11...master

      我们将不得不等到 npm 的下一个版本才能实现这一点,但我不确定。

      【讨论】:

      • 所以 md-input-container 目前不可用?我看到很多 md-input-container 的例子,它只适用于 JS 吗?不适合打字稿?
      • 我认为这些示例在@angular/material@latest npm 版本中还行不通。 textarea md-autosize 也是如此。我不得不等待包含它的版本。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-06-05
      • 1970-01-01
      • 2016-08-27
      • 2018-08-08
      • 1970-01-01
      相关资源
      最近更新 更多