从 Firebase API 返回信息后，ngFor 不会更新列表答案

【问题标题】：ngFor won't update list after information returns from Firebase API从 Firebase API 返回信息后，ngFor 不会更新列表
【发布时间】：2016-05-19 15:18:31
【问题描述】：

我这里有我用 Ionic 设置的代码。一切运行良好。我可以将我的结果从 Firebase 注销到控制台，但是当我将它们分配给 ngFor 列表时，它们仍然是未定义的，从查看列表看来。由于某种原因，他们没有更新。一旦我从服务器获取了一些异步数据，有没有办法让 UI 更新。

import { Injectable } from 'angular2/core';
import { Observable } from 'rxjs/Rx';

@Injectable()

var ref = new Firebase('https://myapi.firebaseio.com');

declare var Firebase;

export class NewsService {
    
    constructor() {
        
    }
    
    get(source) {
        return new Observable(observer => {
            ref.once('value', snapshot => {
                observer.next(snapshot.val().News[source]);
                observer.complete();
            });
        });
    }
}

/*~~~~~~~~~~~~~~~*///Other file///*~~~~~~~~~~~~~~~*/
import {Page, NavController, NavParams} from 'ionic-framework/ionic';
import { NewsService } from '../../shared/services/news-service';


@Page({
  templateUrl: 'build/pages/news/news.html',
  provider: [NewsService]
})

export class News {
  items: Array<{title: string, src: string, href: string, alt: string}>;
  
  constructor(private nav: NavController, navParams: NavParams, newsService: NewsService) {

    var subscription = newsService.get('businesstech').subscribe(
            val => this.items = val,
            err => console.log(err),
            () => {
                subscription.unsubscribe();
            }
        ) 
  }
}

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>News</ion-title>
</ion-navbar>

<ion-content>
    <ion-list>
        <ion-item *ngFor="#item of items">
            <ion-thumbnail>
                <img src={{item.src}}>
                <h2>{{item.title}}</h2>
                <p>{{item.atl}}</p>
                <button clear item-right (click)="open(item.href)">Open</button>
            </ion-thumbnail>
        </ion-item>
    </ion-list>
</ion-content>

【问题讨论】：

看起来像 stackoverflow.com/questions/34598054/… 的副本
感谢您指出这一点。希望我能找到它，但在这片丛林中，我不知道该输入什么。我已经搜索了整个网络，但没有得到帮助

标签： ionic-framework angular

【解决方案1】：

ref 变量是在 Angular2 上下文之外创建的。您应该在服务的构造函数中对其进行初始化：

export class NewsService {
  constructor() {
    this.ref = new Firebase('https://myapi.firebaseio.com');
  }

  (...)
}

【讨论】：

不确定如何回复，但查看我的控制台它会注销“异常：TypeError：无法读取 [null] 中未定义的属性 'src'”，这来自 viewFactory。编辑：所以这将是我的 HTML 似乎无法获取链接的图像。
我意识到本质上，观察者首先会收到一个空数组，其中包含待处理结果的实际长度
我会说您要显示的项目是欠精细的（请参阅<img src={{item.src}}>）。这在 JavaScript 中是可能的，因为 undefined 是一个值。所以你可能在这里犯了一个错误：snapshot.val().News[source]。您需要检查接收数据的结构...

【解决方案2】：

除了@ThierryTemplier 的出色回答：

Angular 代码在 Angulars 区域内运行，该区域已修补，因此 Angular 知道何时运行更改检测。
当代码在 Angulars 区域之外运行时，例如 new Firebase() 在 Angulars 代码之外初始化时，它会在区域之外运行，并且 Angular 无法识别模型更改。
从 Angular 组件的构造函数（或其他地方使用 Angular 指令、服务等）运行它可以修复它。

另见Triggering Angular2 change detection manually

【讨论】：