Ionic / Angular: ngFor не обновляется - PullRequest
Новая
       13

Ionic / Angular: ngFor не обновляется

0 голосов
/ 17 октября 2018

Я пытаюсь составить список активных устройств.Хранение этой информации в переменной экземпляра 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);
      }
    });

  }

}

Что можетбыть возможной причиной этого?

1 Ответ

0 голосов
/ 17 октября 2018

Может быть, вам нужен объект 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);
}
...