ngFor over array或observable不更新html值

我有一个角度服务，它与BE连接，获取一个事件流，并返回一个可观测值

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) => {
    ...
 });
}

我还尝试了另一种方法订阅它并将值赋给数组：

@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>

...
{{streamObj.attr1}}

---

这两种方法只有在我不断引用setInterval函数调用中的属性时才有效，正如上面的代码和代码注释中所解释的那样，这应该是不必要的。我错过了什么

一,。请检查

this。您的
getStream
方法中的streamObj

是一个数组。确保在执行

observer.next（）

时，传递了一个

StreamObj

数组？2.在第一种方法的组件中，我没有看到您在模板中使用的

streamList

，您的意思是

streamObs

？有一种更好的方法可以返回observable，而不是

新observable（

…底线是当您执行

下一步操作时

，然后确保您传递一个

StreamObj

数组，因为这是您在模板[即ngFor]中所期望的结果谢谢您的提问，我添加了一些代码，以明确调用

.next（）时如何分配数组

。我想知道我是否应该尝试将单个streamObj传递给next并更新组件中的数组？我会尝试。在

next

中传递数组是可以的。您可以尝试像这样传递数组的克隆-

observer.next（[…this.streamObjArray]）

可以，但当阵列开始增长时，这不是会有性能问题吗？此阵列可能最终会有大约5K个项目。是的，如果其长度为5K，那么这可能是问题所在。我不知道您的阵列是否会太大。正如您提到的，您也可以采用组件方法。在组件中在阵列中推送新的streamObjent.1.请在

getStream

方法中检查

this.streamObj

是否为数组。请确保执行

observer.next（）时

，您传递了一个

StreamObj

？2的数组。在第一种方法中的组件中，我没有看到您在模板中使用的

streamList

，您的意思是

streamObs

吗？可能有更好的方法返回observable而不是

new observable（

…底线是当您执行

下一步操作时

，然后确保您传递了一个

StreamObj

数组，因为这是您在模板中所期望的[i.e.ngFor]谢谢您的提问，我添加了一些代码，以明确在调用

时如何分配数组。下一步（）

。我想知道我是否应该尝试将单个streamObj传递给next并更新组件中的数组？我会尝试。在

next

中传递数组是可以的。您可以尝试像这样传递数组的克隆-

observer.next（[…this.streamObjArray]）

可以，但当阵列开始增长时，这不是会有性能问题吗？此阵列可能最终会有大约5K个项目。是的，如果其长度为5K，那么这可能是问题所在。我不知道您的阵列是否会太大。正如您提到的，您也可以采用组件方法。在组件中在阵列中推送新的streamObj耳鼻喉科。

@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);
 }
}

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