ngFor для массива или наблюдаемого не обновляет значения html angular 8 - PullRequest
Новая
       35

ngFor для массива или наблюдаемого не обновляет значения html angular 8

1 голос
/ 04 июля 2019

У меня есть угловой сервис, который соединяется с BE и получает поток событий и возвращает Observable. 

streamObjArray:StreamObj[] = [];

getStream() : Observable<Array<StreamObj>> {
...
return new Observable((observer) => {
  let eventSource = new EventSource(this.serverStreamUrl);
  eventSource.onmessage = (event) => {
    ... 
    observer.next(this.streamObjArray);
  };
  eventSource.onerror = (error) => {
    ...
 });
}

В моем компоненте я использую этот сервис и пробовал 2 подхода, один из которых представляет Observableтип возврата из метода службы непосредственно в компонент: 

...
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [AppService],
styleUrls: ['./app.component.css']
})
export class AppComponent {
...
  streamObs: Observable<StreamObj[]>;

  constructor(private appService: AppService) {}

  connectStream(): void {
    console.log("init");
    this.streamObs = this.appService.getStream();

    // need to use the setInterval call or FE html doesn't update
    setInterval(() => this.streamObs, 1000);
  }
}

для этого подхода HTML использует *ngFor с асинхронным каналом: 

<tr *ngFor="let streamObj of streamObs | async">
 ...
{{streamObj.attr1}}
</tr>

Я также пробовал другойПодход, подписавшись на него и присвоив значение массиву: 

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [AppService],
styleUrls: ['./app.component.css']
})
export class AppComponent {

subscription: Subscription;
streamList: StreamObj[];

constructor(private appService: AppService) {}

connectStream(): void {
  this.subscription = this.appService.getStream()
    .subscribe((localStream => this.streamList = localStream));

  // next line required to update table in html Front End
  // otherwise the table never updates.
  setInterval(() => this.streamList, 1000);
 }
}

, для этого подхода html использует *ngFor без каких-либо каналов: 

<tr *ngFor="let streamObj of streamList">
 ...
{{streamObj.attr1}}
</tr>

Оба подхода работают, только если япостоянно ссылаться на атрибут в вызове функции setInterval, как объяснено в коде и комментарии к коду выше, что не должно быть необходимо.Что мне не хватает?

...