Angular组件中反转数组时属性未更新问题排查

核心原因是Array.prototype.reverse()是原地修改数组的方法——它会直接改变原数组本身，同时返回修改后的数组引用。

当你执行this.variable = array.reverse()时，reverse()先把传入的array（服务返回的原数组）反转，然后返回这个数组的引用，所以this.variable和原array指向的是同一个数组对象。如果你后续查看原array，会发现它已经是反转后的状态，这可能让你误以为this.variable没有被正确赋值，但实际上两者是同一个数组。

解决方案 #

要避免修改原数组，同时得到反转后的新数组，你需要先复制原数组，再执行反转操作：

方法1：使用扩展运算符复制数组 #

this.variable = [...array].reverse();

方法2：使用slice()复制数组 #

this.variable = array.slice().reverse();

两种方法都会创建原数组的浅拷贝，再对拷贝后的数组执行反转，这样原数组不会被修改，this.variable也会得到独立的反转后数组。

额外建议 #

在Angular中，不建议在构造函数中处理异步数据请求，更规范的做法是将异步逻辑放在ngOnInit生命周期钩子中：

import { Component, OnInit } from '@angular/core';
import { YourService } from './your.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  public variable: any[] = [];

  constructor(private yourService: YourService) {}

  ngOnInit(): void {
    this.yourService.getData().subscribe((responseArray) => {
      this.variable = [...responseArray].reverse();
    });
  }
}

内容的提问来源于stack exchange，提问作者Rahul Raj