Question

我无法在Angular2中渲染表达式。

例如，我有类似下面的示例，但{{profile.name}}没有任何内容。

然而，这不仅仅是在访问组件实例之外的时候。无论我在表达式中放置什么，它都不会呈现（例如{{1 + 2}}）。更奇怪的是，它删除了包含表达式的DOM元素的所有内容。

import { Component, View } from 'angular2/core'

@Component({
  selector: 'my-component'
})
@View({
  template: `
  <div class="user">
    {{profile.name}}
  </div>
  `
})
export class MyComponent {
  profile

  constructor() {
    this.profile = {
      name: 'John Smith'
    }
  }
}

不确定我缺少什么。任何帮助将不胜感激！

修改

所以我做了一些进一步的测试，并且发现问题只发生在我使用<router-outlet>时。所以我有一些看起来像这样的东西（道歉代码量）

app.ts

import { View, Component } from 'angular2/core'
import { RouteConfig, RouterOutlet } from 'angular2/router'

import { Home } from './home'

@Component({
  selector: 'my-app'
})
@View({
  template: '<router-outlet></router-outlet>',
  directives: [RouterOutlet]
})
@RouteConfig([
  { path: '/', redirectTo: ['/Home'] },
  { path: '/home', as: 'Home', component: Home }
])
export class App {
  constructor(public router: Router) {}
}

home.ts

import { Component, View } from 'angular2/core'

@Component({
  selector: 'home',
})
@View({
  template: '{{name}}'
})
export class Home {
  name:string = 'John Smith'
}

Answer 1

我有类似的问题。我的Angular2库定义错误。

按此顺序定义库有帮助：

<!-- Keep these first!!! -->
<script src="~/node_modules/es6-shim/es6-shim.js"></script>
<script src="~/node_modules/systemjs/dist/system-polyfills.js"></script>

<script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="~/node_modules/systemjs/dist/system.js"></script>
...

系统的位置 - polyfill似乎很重要！

Answer 2

我认为马克在评论中指出了这个问题！进一步发展。实际上，您需要明确定义要在另一个组件中使用的组件（和指令）（angular/core除外）到directives属性。

以下是将MyComponent组件用于另一个组件的方法：

@Component({
  selector: 'my-app',
  template: `
    <my-component></my-component>
  `,
  directives: [ MyComponent ]
})
export class AppComponent {
  (...)
}

我使用您的MyComponent课程对此进行了测试，但它确实有效。

希望它可以帮到你，亨利

Answer 3

如果你不包含zone.js，那似乎就会发生。在引导Angular之前添加import "zone.js/lib/browser/zone-microtask";为我解决了这个问题。

Answer 4

我有一个类似的问题，使用路由器和路由器插座，一旦我添加* ngFor或* ngIf-like语句就不会呈现我的页面。然而，胡子的表达有效。这适用于Angular v2.0.0-rc.6。

绝对没有错误消息，只是一个空白的页面，这似乎很残忍（是的，我正在跟你说话，Angular团队;-)）。

相对较新的Angular2，我花了一段时间才发现我错过了CommonModule：

import { CommonModule }      from "@angular/common";

@NgModule({
imports: [
    CommonModule,
    yourRouting
],
declarations: [
    YourComponent
]
})

export class OrderModule {
}

我通过浏览Angular routing tutorial和他们的live demo并将他们的设置与我的设置进行比较来弄明白。

也许这有助于某人下线。

Angular2表达式无法呈现

4 个答案: