TypeScript：将新对象添加到对象数组中答案

【问题标题】：TypeScript: add a new object into an array of objectsTypeScript：将新对象添加到对象数组中
【发布时间】：2022-01-16 18:09:27
【问题描述】：

我有以下数据结构：

uiBundles:
[
    {
        "id": "tasks widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "tasks-widget",
                "roles": "MB"
            }
        ]
    },
    {
        "id": "berater widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "berater-widget",
                "roles": "MB"
            }
        ]
    }
]

我想做的是在这个嵌入的对象数组中添加一个新的 uiUnit。这是我的代码：

add-new.component.ts:

uiBundles: UIBUndle[];

ngOnInit(): void {
    this.getBundlesService.getUiBundles().subscribe((value: UIBundle[]) => this.uiBundles = value);
}

addWidget(id: string): void {
    this.selectedUiUnits = this.uiBundles.filter((data) => data.id === id);
    let newWidget = { id: 'new', uiUnits: [{ id: 'new-widget', type: 'widget', roles:'MB' }] };
}

add-new.component.html:

<div *ngFor="let bundle of uiBundles">
  <button (click)="addWidget(bundle.id)"></button>
</div>

当我运行这段代码时，结果是这样的：

[
    {
        "id": "tasks widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "tasks-widget",
                "roles": "MB"
            }
        ]
    },
    {
        "id": "berater widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "berater-widget",
                "roles": "MB"
            }
        ]
    },
    {
        "id": "new",
        "uiUnits": [
            {
                "type": "widget",
                "id": "new-widget",
                "roles": "MB"
            }
        ]
    }
]

但我想做的是：

[
    {
        "id": "tasks widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "tasks-widget",
                "roles": "MB"
            },
            {
                "type": "widget",
                "id": "new widget",
                "roles": "MB"
            }
        ]
    },
    {
        "id": "berater widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "berater-widget",
                "roles": "MB"
            }
        ]
    }
]

谁能帮帮我，我在这里做错了什么？

【问题讨论】：

如果您可以在代码块中保留缩进会更好。
代码格式改进
我在您的代码中看不到您将新小部件添加到uiBundles 的位置。你没有对你的newWidget 变量做任何事情，你是否省略了一些代码？

标签： arrays angular typescript object

【解决方案1】：

试试这个：

addWidget(id: string): void {
    const index: number = this.uiBundles.findIndex((data) => data.id === id);
    const newUnits = [{ id: 'new-widget', type: 'widget', roles:'MB' }];

    this.uiBundles[index].uiUnits.push(newUnits);
}

【讨论】：

【解决方案2】：

您不会将新小部件添加到具有指定 id 的小部件的 uiUnits 数组中，而是创建一个全新的小部件。

你想要的只是

addWidgetToBundleUnits(id: string) {
  const selectedBundle = this.uiBundles.find(bundle => bundle.id === id);
  const widgetToAdd = {id: 'new-widget', type: 'widget', roles: 'MB'};
  selectedBundle.uiUnits.push(widgetToAdd);
}

【讨论】：