使用来自 angular 10 中另一个组件的数据更新对象

Question

所以在我的项目中，我有 3 个组件。第一个是主要的，第二个和第三个。

我在主要组件中创建了一个空对象并将其传递给其他两个组件，第二个组件进行了一些更改，毕竟第三个组件显示了声明为 table 中的更改显示数字。

我无法在第三个组件中显示 displayItmes ={} 的更新值。

我很高兴被困在这里。

export class firstComponent{
  displayItems = {};
}

HTML:

<div class="flex-fill">
    <app-secend [displayItems]="displayItems"></app-secend>
    <app-third  [displayItems]="displayItems"></app-third>
</div>

第二个组件是：

 export class secend {
    @Input() displayItems;
    x = _sum;
    syncDisplayItems() {
        this.displayItems.TotalPurchaseAndImport = 15 + x
    }
}

第三部分是：

export class third {
    _displayItems;
    @Input()
    set displayItems(data: any) {
        if (data) {
            this._displayItems = data;
        }
    }

    get displayItems(): any {
        return this._displayItems;
    }
}

第三个组成部分HTML是：

<div class="p-col-3 vat-cell">
 {{ displayItems.TotalPurchaseAndImport}}
</div>

Answer 1

在第二个组件中，未调用填充数据的 SyncDisplayItem 方法。尝试实现 ngOnInit 并从那里调用它。我创建了一个具有相同要求的堆栈闪电战解决方案，并添加了额外的按钮来演示来自第二个组件 OnInit 和按钮点击

的更改事件

https://stackblitz.com/edit/angular-ivy-cgmkun?file=src%2Fapp%2Fcomponents%2Fsecond.component.ts

使用来自 angular 10 中另一个组件的数据更新对象

Updating an object using a data which is coming from another component in angular 10

angular

typescript

object

angular10