Ionic/Angular: ngFor 不更新

Question

我正在尝试列出活动设备。将此信息保存在实例变量 screens 中。每当我使用 setTimeOut 进行更改时它都有效，但是如果我在 callback 部分进行更改则它不起作用。

这是代码：

import { Component } from "@angular/core";
import { NavController } from "ionic-angular";
import { Zeroconf } from '@ionic-native/zeroconf';

@Component({
  selector: "page-home",
  templateUrl: "home.html"
})

export class HomePage {

  screens: Array<{name: any, ip: any}> = [];

  constructor(public navCtrl: NavController, private zeroconf: Zeroconf) {


    this.screens.push({
      name: "TEST",
      ip: "123"
    })

    setTimeout(() => {
      this.screens.push({
        name: "TEST2",
        ip: "Test2"
      })
    }, 1000);

    setTimeout(() => {
      this.screens.push({
        name: "TEST3",
        ip: "Test3"
      })
    }, 2000);

    setTimeout(() => {
      this.screens.push({
        name: "TEST4",
        ip: "Test4"
      })
    }, 10000);

     this.zeroconf.watch('_http._tcp.', 'local.').subscribe(result => {
      if (result.action == 'added') {
        this.screens.push({              //This is not working
          name: result.service.name,
          ip: result.service.ipv4Addresses
        });
        setTimeout(() => {
          this.screens.push({
            name: result.service.name,
            ip: result.service.ipv4Addresses
          });
        }, 1000);
      } else {
        console.log('service removed', result.service);
      }
    });

  }

}

这可能是什么原因造成的？

Answer 1

可能您需要一个 BehaviorSubject 来定期更新它

在你的共享服务中定义

    listOfScreens: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);

    addScreens(newData) {
    this.listOfScreens.next(this.listOfScreens.getValue().concat([newData]));
}

在你的组件中

ngOnInit() {
  this.sharedService.listofScreens.subscribe(
    screens => this.screens = screens
  )
}

addScreens() {
  let data = {
  name: "TEST",
  ip: "123"
}
  this.sharedService.addScreens(data);
}

Ionic/Angular: ngFor 不更新

Ionic/Angular: ngFor does not update

ionic-framework

ngfor

angular