Angular2 expressions not rendering

问题

I'm having trouble getting expressions to render in Angular2.

For instance, I have something like the example below, but the {{profile.name}} renders nothing.

However it's not just when accessing something off the component instance. No matter what I put in the expression, it won't render (e.g. {{1 + 2}}). And what's weirder, it deletes all the content of the DOM element the expression is contained in.

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'
    }
  }
}

Not sure what I'm missing. Any help would be much appreciated!

EDIT

So I have done some further testing, and have found the issue only occurs when I am using <router-outlet>. So I have something that looks like this (apologies for the amount of code)

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'
}

回答1:

I had similar problem. I had my Angular2 libraries defined in wrong order.

Defining libraries in this order helped:

<!-- 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>
...

Place of the system-polyfills seems to be important!

回答2:

I think that Mark points the problem out in his comment! To develop a bit more. In fact, you need to explicitly define the components (and directives) you want to use in another component (except the ones from angular/core) into the directives attribute.

Here is the way you would use your MyComponent component into another one:

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

I tested this with your MyComponent class and it works.

Hope it helps you, Thierry

回答3:

That seems to happen if you don't include zone.js. Adding an import "zone.js/lib/browser/zone-microtask"; before bootstrapping Angular fixed the problem for me.

回答4:

I had a similar problem where, using the router and router-outlet, it would not render my page as soon as I added *ngFor or *ngIf-like statements. Expressions with mustaches worked, however. This is for Angular v2.0.0-rc.6.

There were absolutely no error messages, simply an empty page, which seems cruel (yes, I'm talking to you, Angular team ;-) ).

Being relatively new to Angular2, it took me a while to figure out that I was missing the CommonModule:

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

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

export class OrderModule {
}

I figured it out by going over the Angular routing tutorial and their live demo and comparing their setup to mine.

Maybe that helps someone down the line.

来源：https://stackoverflow.com/questions/34625205/angular2-expressions-not-rendering

标签

templates

typescript

expression

render

angular