在Angular中,数组的映射函数后不更新的问题通常是由于变更检测机制导致的。Angular使用的是基于对象引用的变更检测机制,当数组中的元素发生变化时,并不会触发数组的更新。
解决这个问题的方法是创建一个新的数组,而不是直接修改原始数组。你可以使用Array的map()方法来实现这一点。
以下是一个示例代码,演示如何在Angular中解决数组在映射函数后不更新的问题:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
- {{ item }}
`,
})
export class AppComponent {
originalArray = [1, 2, 3, 4, 5];
mappedArray: number[];
constructor() {
this.mappedArray = this.originalArray.map((item) => {
return item * 2;
});
}
}
在上面的代码中,我们创建了一个原始数组originalArray,然后在构造函数中使用map()方法将每个元素乘以2,并将结果赋值给mappedArray。在模板中,我们使用ngFor指令遍历mappedArray并显示每个项。
这样做的好处是,我们没有直接修改原始数组,而是创建了一个新的数组。由于原始数组没有发生变化,Angular的变更检测机制不会触发更新检查,而只会更新mappedArray。