使用来自角度 10 中的另一个组件的数据更新对象答案

【问题标题】：Updating an object using a data which is coming from another component in angular 10使用来自角度 10 中的另一个组件的数据更新对象
【发布时间】：2021-07-04 16:57:12
【问题描述】：

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

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

我无法在第三个组件中显示 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>

【问题讨论】：

在第一个 HTML 标记中，您从第一个组件引用第一个组件。是不是这个问题的错字？
实际上不是，我将主要组件引用到第一个 first = main

标签： angular typescript object angular10

【解决方案1】：

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

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

【讨论】：

我认为这里存在误解。就像我说的。第一个组件是主要组件，我的意思是所有 html 选择器都应该在 appcomponent 中。但我真的很喜欢你的方法。我确实在 ngOnInit() 中调用了该方法，但我的数据没有得到更新。
如果您可以创建一个 stackBlitz 项目，这将有助于解决问题
不幸的是这个项目不是开源的，我可以在这里分享。但不用担心了。问题解决了。