Angular在对象数组中添加新对象后不会更新
创始人
2024-10-30 19:30:53
0

这可能是由于Angular对数组中的对象进行了浅层比较而导致的。为了解决这个问题,您可以使用切换数组引用的方法来更新视图。可以通过以下两种方式之一实现:

方法一:

在您的组件中,创建一个新的数组,然后使用 Array.push() 方法将新对象推入该数组。然后将该数组分配给原始数组的引用。这将强制Angular重新渲染组件,并更新视图,使新对象显示出来。

示例代码如下:

originalArray: Object[] = [{id: 1, name: 'John'}, {id: 2, name: 'Doe'}]; newObject: Object = {id: 3, name: 'Alice'};

addToOriginalArray() { let tempArray = this.originalArray.slice(); // create a copy of original array tempArray.push(this.newObject); // push new object to temp array this.originalArray = tempArray; // assign temp array to original array reference }

方法二:

使用 Angular 的 change detection 将变更检测策略更改为 OnPush。这将防止Angular每次更改检查时都进行全面调用,并使它仅在输入对象更改时才调用。在这种情况下,您需要通过具有新值的对象将输入对象重写。

示例代码如下:

import {Component, Input, ChangeDetectionStrategy} from '@angular/core';

@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'], changeDetection: ChangeDetectionStrategy.OnPush // change change detection strategy }) export class MyComponent { @Input() originalArray: Object[] = [{id: 1, name: 'John'}, {id: 2, name: 'Doe'}]; @Input() newObject: Object = {id: 3, name: 'Alice'};

addToOriginalArray() { let tempArray = this.originalArray.slice(); // create a copy of original array

相关内容

热门资讯

黑科技美元局(微扑克职业代打)... 黑科技美元局(微扑克职业代打)太实锤了原生真的是有挂(透视)透明挂教程(2026已更新)(哔哩哔哩)...
黑科技免费(aapoker透明... 黑科技免费(aapoker透明辅助器)太嚣张了好像是真的有挂(透视)安装教程(2023已更新)(哔哩...
黑科技挂(wpk最新黑科技)太... 黑科技挂(wpk最新黑科技)太离谱了切实有挂(透视)黑科技教程(2024已更新)(哔哩哔哩)是一款可...
黑科技科技(wepoke软件透... 黑科技科技(wepoke软件透明挂)太离谱了真是存在有挂(透视)解密教程(2023已更新)(哔哩哔哩...
黑科技中牌率(微扑克辅助手机)... 1、黑科技中牌率(微扑克辅助手机)太嚣张了先前存在有挂(透视)第三方教程(2023已更新)(哔哩哔哩...
黑科技ai代打(德州之星手游辅... 1、黑科技ai代打(德州之星手游辅助)太无语了先前存在有挂(透视)可靠教程(2021已更新)(哔哩哔...
黑科技科技(WePoKe辅助器... 您好,WePoKe辅助器真的有用吗这款游戏可以开挂的,确实是有挂的,需要了解加微【136704302...
黑科技总结(wepokeai插... 黑科技总结(wepokeai插件)太坑了确实是真的有挂(透视)细节揭秘(2025已更新)(哔哩哔哩)...
黑科技系统(wpk德州职业代打... 黑科技系统(wpk德州职业代打)太实锤了好像有挂(透视)细节揭秘(2024已更新)(哔哩哔哩)是一款...
黑科技模拟器(aa扑克辅助)太... 黑科技模拟器(aa扑克辅助)太坑了固有真的有挂(透视)透明挂教程(2026已更新)(哔哩哔哩);一、...