Angular中*ngFor用array.reverse()生产环境失效及交互反转问题

问题根源：Array.reverse()的破坏性操作 #

Array.reverse()是原地修改原数组的方法——调用它会直接改变authService._messagesList的元素顺序，而非返回一个新的反转数组。

为什么会出现反复切换？ #

Angular的变更检测机制会在多种场景下触发（比如textarea输入、组件状态更新、异步操作完成），每次触发时都会重新执行*ngFor中的表达式authService._messagesList.reverse()。这意味着每一次变更检测，原数组都会被反转一次，导致界面上的消息列表在升序和降序之间反复切换。

生产环境失效的原因 #

生产环境下Angular会启用更激进的性能优化（比如变更检测策略优化、表达式缓存）。原地修改数组时，数组的引用没有发生变化，Angular可能无法识别到数组内部顺序的变更，导致渲染不更新；或者因为反复原地修改引发的状态混乱，最终出现渲染异常。

slice().reverse()解决问题的原理 #

slice()不带参数时会创建原数组的浅拷贝，得到一个全新的数组引用。对这个副本执行reverse()，只会修改副本的顺序，不会影响原数组authService._messagesList。

每次变更检测时，都会基于原数组的最新状态创建新的反转副本，既保证了消息列表始终是反转后的顺序，又因为新数组的引用变化，能让Angular正确感知到数据更新，在生产环境下也能稳定渲染。

修正后的代码示例 #

<div class="chat__messages">
    <div *ngFor="let message of authService._messagesList.slice().reverse()" [@fadeInOut] class="message" [ngClass]="session.User.id == message.Id_Sender ? 'myMsg' : 'otherMsg'">
        <p>{{message.Content}}</p>
        <span>{{message.createdAt | date: "HH:mm"}}</span>
    </div>
    <span class="loader" *ngIf="isLoading"></span>
</div>
<div class="chat__send">
    <textarea #textarea (input)="adjustTextareaHeight()" rows="1" [(ngModel)]="_content" (keydown.enter)="sendMessage();$event.preventDefault()" placeholder="Envoyer un message"></textarea>
    <button (click)="sendMessage()"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg></button>
</div>

关键提示 #

• 禁止在Angular模板表达式中使用原地修改数组/对象的方法（比如reverse()、sort()、splice()），这类操作会引发不可预测的状态变更和渲染问题。
• 如需在模板中处理数组，优先通过创建副本的方式操作，比如slice()、扩展运算符[...array]等。

内容的提问来源于stack exchange，提问作者Victor Nardella