Angular - 在数组中推送一些数据后如何再次触发 *ngFor 指令？

Question

我在请求后在我的数组中添加一个对象。一切顺利，但我希望在收到响应的同时显示新数据。当我收到响应时，我将新对象推送到我的数组中，用于在我的视图中显示消息。

我尝试使用ChangeDetectorRef（detectChanges() 方法）和NgZone（run() 方法）但没有成功。基本上我希望我的视图再次出现在 ngFor 上，以便在发送时显示最后一条消息。

我在互联网上搜索，但找不到任何关于 Angular 的答案，除了一个不起作用的线程。

这是我想要触发消息呈现的代码部分：

this.chatRequestService.send(this.navParams.get('id_chat'), nmMessage, this.token.value).subscribe(
            (result) => {
              this.messages.push(result);
            },
            (error) => {
              console.log(error);
            }
          );

这是我在模板中的 ngFor 指令：

<ng-container *ngFor="let message of messages[0]">
        <ion-row>
            <ion-col col-1 class="round-right"><ion-avatar item-start><img src="assets/imgs/BK.png" alt="Burger King" title="Burger King"></ion-avatar></ion-col> <!-- remplacer par {{message[0]?.sender.profileImageUrl}} -->
            <ion-col col-9>
                <div *ngIf="currentUser == message?.sender.id else elseBlock1" class="talk-bubble round-left me">
                    <div class="talktext">
                        <h5>{{message?.sender.username}}</h5>
                        <p>{{message?.content}}</p>
                    </div>
                </div>
                <ng-template #elseBlock1>
                    <div class="talk-bubble round-left">
                        <div class="talktext">
                            <h5>{{message?.sender.username}}</h5>
                            <p>{{message?.content}}</p>
                        </div>
                    </div>
                </ng-template>
            </ion-col>
        </ion-row>
    </ng-container>

提前感谢愿意花时间阅读/回答的任何人。

Answer 1

您可以使用trackBy 和*ngFor，在数组数据更改（添加/删除项目）后自动更新视图。有关详细说明，请查看 post。

以同样的方式，您可以实现一些自定义函数来跟踪列表中的项目。因此，您必须在 messages[0] 数组中选择唯一标识符。例如：sender.username 并从函数中返回此值。

identify(index, message) {
     return message.sender.username; 
}

html

<ng-container *ngFor="let message of messages[0]; trackBy:identify">
       ...................
</ng-container>

Answer 2

您可以尝试使用 slice() 复制具有新实例的相同数组。这是示例代码

this.customerArray = this.customerArray.slice();