Question

我有一个组件，用于存储要在列表中显示的服务器数组。该组件从服务订阅了一个observable。

这是组件代码：

import {Client} from '../../connectionService/client.service';


@Component({
    templateUrl: 'build/pages/page1/page1.html',
    providers: [Client]
})
export class Page1 {
    servers : any;

    constructor(private client: Client) {
      this.servers = [];
      this.client._myServers.subscribe((newServer: any) => {
        console.log("new server!", newServer);
        this.servers.push(newServer);
      });
}

观点：

  <ul>
    <li *ngFor='#item of (servers)'>
     Name : {{item.name}}
  </li>
</ul>

服务：

import { Injectable } from '@angular/core';
import {Observable}     from 'rxjs/Observable';
import {Subject}  from 'rxjs/Subject';


    @Injectable()
    export class Client {
      private serversSubject: Subject<any>;
      _myServers : Observable<ServerHandler>;

    constructor() {
        this.serversSubject = new Subject<any>();
        this._myServers = this.serversSubject.asObservable();
    }

...

当我找到一台服务器时（与上述服务相同：

      this.serversSubject.next({"name": result.name, "adress": result.address});

＆＃34;新服务器！＆＃34;得到打印，服务器在组件中更新，但视图不显示新项目。当我进出页面时，会出现新的服务器。

提前致谢，马库斯

Answer 1

这是一个常见的问题。您的蓝牙库可能在Angulars区域外运行，当在Angulars区域外运行的代码更新模型时，不会调用Angulars更改检测。

手动调用更改检测有不同的策略。 Triggering Angular2 change detection manually

正在更新的数组但视图不在Angular 2中

1 个答案: