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

Posted 2023-03-13

【中文标题】TypeScript：将新对象添加到对象数组中

【英文标题】：TypeScript: add a new object into an array of objects

【发布时间】：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 变量做任何事情，你是否省略了一些代码？

【参考方案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);