Angular 2 Template not updated

Question

Я новичок в Angular 2 и пытаюсь получить простой проект с земли. Он работает внутри встроенного браузера Electron, если это вообще актуально.

В принципе, я просто хочу вызвать список колонистов из службы и распечатать их на странице после разрешения вызова. Однако, несмотря на то, что обещание решает (я вывел вывод на консоль после успеха), шаблон отказывается обновляться.

Я знаю, что мой синтаксис (в основном) правильный, потому что перед переключением на mock $ Promise я просто устанавливаю значение непосредственно в ngOnInit(), и он отображается просто отлично.

Любые мысли о том, где я ошибаюсь?

Вот мое главное приложение Компонент:

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); 
 
     }); 
 
    } 
 

 
}

My App Модуль:

// 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 {}

My App HTML шаблона:

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

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

Моя_служба:

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); 
 
    }  
 
}

И мой фиктивный данные:

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

Answer 1

Я понял, на самом деле. Я забыл одну важную часть информации (мои извинения): я запускаю код внутри Electron, который, как представляется, требует обновления NgZone() для обновления от внешних элементов (например, обещаний).

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

Answer 2

Моя первоначальная догадка является Javascript разбился из colonists неопределен, когда страница загружена.

Поэтому я предлагаю следующую модификацию:

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

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

Однако, я создал plunker http://plnkr.co/edit/xRMCcB и работать без изменений выше.

Таким образом, ваш код, по крайней мере, опубликованные части, кажется, работает.