Question

在我的Angular（9）应用程序中，我从WebsocketService获得了一个对象数组的可观察对象，如下所示：

public objects$: Observable<MyClass[]>;

ngOnInit(): void {

  this.objects$ = myWebsocketService.get()

然后我用*ngIf对此进行迭代，并为每个对象调用一个组件以呈现它：

<table>
  <tr *ngFor="let element of objects$ | async">
    <td><my-component [item]="element"></my-component><td>

那行得通。但这意味着，每次object $更改时，必须重新加载my-component的每个实例。对我来说，这似乎效率很低！最好是a）仅重新初始化实际更改的组件，以及b）甚至不重新初始化my-components，但保留它们，将其视为可观察的并订阅它。但我不知道如何将这种行为与*ngFor结合使用-可以提供任何帮助！

Answer 1

您可以在 * ngFor 上使用trackBy来处理更改。它允许您检查每个元素并仅重新渲染新元素。您可以使用id或其他唯一元素来检查它们。

模板：

<tr *ngFor="let element of objects$ | async; trackBy: trackByFunction">
</tr

组件：

trackByFunction(index: number; element: MyClass) {
 return element.id; // or another unique property
}

这是我几天前在Stackblitz上所做的一个示例（带有有关标记新元素的消息）

Answer 2

这是一个可观察元素。因此，您可以订阅该对象，Angular会检查更改，并在不重新加载的情况下更新您的变量。

类似这样的东西：

this.yourWebSocketService.yourObservableObject.subscribe( data=> {
    this.objects$ = data
}

使用ngFor的可观察数组到可观察数组

2 个答案: