Question

我是Angular 2的新手并试图让一个简单的项目开始。它在嵌入式Electron浏览器中运行，如果它完全相关的话。

基本上，我只是想从服务中调用一个冒号列表，并在调用解决后将它们打印到页面。但是，即使promise已解决（我在成功时已将输出注销到控制台），模板仍拒绝更新。

我知道我的语法（大多数）是正确的，因为在切换到模拟$ Promise之前，我只是直接在ngOnInit（）中设置了值，它显示得很好。

关于我出错的地方的任何想法？

这是我的主要应用程序组件：

＆＃13;

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';

import { Colonist } from './models/colonist';
import { ColonistService } from './services/colonist.service';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html',
    providers: [ColonistService]
})
export class AppComponent implements OnInit{
    title: string;
    colonists: Colonist[];

    constructor(private colonistService: ColonistService) {
        this.title = "Steel Saviors";
    }

    ngOnInit(): void {
        this.getColonists();
    }

    getColonists(): void {
        this.colonistService.getAll()
        .then(colonists => {
            console.log("GOT IT: ", colonists);
            this.colonists = colonists;
            console.log("THIS: ", this);
        });
    }

}

＆＃13;

我的应用模块：

＆＃13;

// Modules
import { NgModule } from "@angular/core"
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

// Components
import { AppComponent } from "./app.component";
import { CharacterCreationComponent } from './components/character-creation/character-creation.component'

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [
      AppComponent,
      CharacterCreationComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

＆＃13;

我的应用HTML模板：

＆＃13;

<h1>{{title}}</h1>

<li *ngFor="let colonist of colonists">
  {{ colonist.firstName }}
</li>

＆＃13;

我的服务：

＆＃13;

import { Injectable } from '@angular/core';

import { Colonist } from '../models/colonist';

import { COLONISTS } from '../mocks/mock-colonists';

@Injectable()
export class ColonistService {

    getAll(): Promise<Colonist[]> {
        return Promise.resolve(COLONISTS);
    }    
}

＆＃13;

我的模拟数据：

＆＃13;

import { Colonist } from '../models/colonist';

export const COLONISTS: Colonist[] = [
    {firstName: 'Alex', lastName: 'Appleton', age: 21},
    {firstName: 'Brandi', lastName: 'Brown', age: 25},
    {firstName: 'Clay', lastName: 'Cassius', age: 32}
]

＆＃13;

Answer 1

我最初的猜测是javascript崩溃了，因为在加载页面时colonists未定义。

所以我建议进行以下修改：

<h1>{{title}}</h1>

<ul *ngIf="colonists">
<li *ngFor="let colonist of colonists">
  {{ colonist.firstName }}
</li>
</ul>

但是，我创建了一个plunker http://plnkr.co/edit/xRMCcB，它没有上述更改。

所以你的代码，至少发布的那些部分，似乎有效。

Answer 2

实际上，我明白了。我忘记了一条至关重要的信息（道歉）：我在Electron中运行代码，这似乎需要NgZone run（）从外部元素（例如promises）刷新。

https://angular.io/docs/ts/latest/api/core/index/NgZone-class.html

Angular 2模板未更新

2 个答案: