Angular2表达式不会呈现

我在使用Angular2呈现表达式时遇到问题。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' 
}

来源

2016-01-06 Chris Greeff

您是否在使用它的父类中指定此组件？也就是说，它有'指令：[MyComponent]'？ –

任何错误消息？这是正确的孤立 – TGH

我已经做了一些进一步的测试，并发现问题似乎只发生在我使用指令时。任何使用表达式加载的指令都会被删除......我仍然难倒了。我会更新这个例子。 –

我认为标志点的问题出在他的评论中！多开发一点。实际上，您需要明确定义要在另一个组件（除angular/core以外的组件）中使用的组件（和指令）到directives属性中。

这里是你会用你的MyComponent组件到另外一个方式：我与你MyComponent类测试这个

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

和它的作品。

希望它可以帮助你，蒂埃里

来源

2016-01-06 07:12:19

我做了一些进一步的测试，发现问题似乎只发生在我使用''指令时。任何使用表达式加载的指令都会被删除......我仍然难倒了。我会更新这个例子。 –

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

来源

2016-01-27 21:02:18 xod

谢谢@xod这应该在angular.io教程中。 –

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

顺序定义库帮助：该系统polyfills的

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

地点似乎是很重要的！

来源

2016-01-28 09:53:48 ttt

圣洁的废话！感谢这个答案！我真的很好奇你如何设法解决这个问题。 – Mono

是的...我留下深刻的印象，你有这个。看起来Angular 2对于所有必须经过的“典礼”都有点脆弱 - 包括确保某些js文件按给定顺序加载？ – Catchops

我有一个类似的问题，使用路由器和路由器插座，只要我添加* 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和他们建立比较雷。

也许这可以帮助某人下线。

来源

2016-09-08 06:26:56 Ben

感谢yuh bro ...这对我有帮助！ –

Angular2表达式不会呈现

回答

相关问题