Angular组件在@Input()数组中不能看到更改
创始人
2024-11-01 15:02:01
0

通常情况下,在Angular中,如果父组件向子组件通过@Input()传递数据,而在子组件中更改了该数据,那么这些更改应该在父组件中是可以看到的。但如果父组件传递给子组件的是一个数组,那么情况就会有所不同。

这是因为数组是一个复杂的数据类型,它在内存中被解释为一个地址。当从父组件中传递数组时,实际上只是将该地址传递给了子组件。如果在子组件中更改了该数组,那么实际上是更改了该地址指向的对象,而不是更改了父组件中的原始数组。因此,父组件不会看到子组件对数组的更改。

为了解决这个问题,我们可以尝试将父组件中的数组复制一份,并将其传递给子组件。这样,子组件中对该数组的更改就不会影响到父组件。

以下是一个示例代码:

父组件:

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    
  `
})
export class ParentComponent {
  items = ['item 1', 'item 2', 'item 3'];

  constructor() {}

  ngOnInit() {}
}

子组件:

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

@Component({
  selector: 'app-child',
  template: `
    
{{ item }}
` }) export class ChildComponent { @Input() set items(value: any[]) { this.originalItems = value; this.itemsCopy = value.slice(); } originalItems: any[]; itemsCopy: any[]; constructor() {} changeItems() { this.itemsCopy.push('item 4'); } }

在子组件的@Input()装饰器中,我们定义了一个set方法,该方法将原始数组保存在originalItems属性中,并将其复制到itemsCopy数组中。在子组件中对itemsCopy数组的更改不会影响到原始数组。此外,我们添加了一个change

相关内容

热门资讯

安卓换鸿蒙系统会卡吗,体验流畅... 最近手机圈可是热闹非凡呢!不少安卓用户都在议论纷纷,说鸿蒙系统要来啦!那么,安卓手机换上鸿蒙系统后,...
app安卓系统登录不了,解锁登... 最近是不是你也遇到了这样的烦恼:手机里那个心爱的APP,突然就登录不上了?别急,让我来帮你一步步排查...
安卓系统拦截短信在哪,安卓系统... 你是不是也遇到了这种情况:手机里突然冒出了很多垃圾短信,烦不胜烦?别急,今天就来教你怎么在安卓系统里...
安卓系统要维护多久,安卓系统维... 你有没有想过,你的安卓手机里那个陪伴你度过了无数日夜的安卓系统,它究竟要陪伴你多久呢?这个问题,估计...
windows官网系统多少钱 Windows官网系统价格一览:了解正版Windows的购买成本Windows 11官方价格解析微软...
安卓系统如何卸载app,轻松掌... 手机里的App越来越多,是不是感觉内存不够用了?别急,今天就来教你怎么轻松卸载安卓系统里的App,让...
怎么复制照片安卓系统,操作步骤... 亲爱的手机控们,是不是有时候想把自己的手机照片分享给朋友,或者备份到电脑上呢?别急,今天就来教你怎么...
安卓系统应用怎么重装,安卓应用... 手机里的安卓应用突然罢工了,是不是让你头疼不已?别急,今天就来手把手教你如何重装安卓系统应用,让你的...
iwatch怎么连接安卓系统,... 你有没有想过,那款时尚又实用的iWatch,竟然只能和iPhone好上好?别急,今天就来给你揭秘,怎...
iphone系统与安卓系统更新... 最近是不是你也遇到了这样的烦恼?手机更新系统总是失败,急得你团团转。别急,今天就来给你揭秘为什么iP...