在Angular 9中,您可以使用reduce
方法将数组对象重新排列为嵌套数组。以下是一个示例代码:
export class AppComponent {
data = [
{ id: 1, name: 'A', parentId: null },
{ id: 2, name: 'B', parentId: null },
{ id: 3, name: 'A1', parentId: 1 },
{ id: 4, name: 'A2', parentId: 1 },
{ id: 5, name: 'B1', parentId: 2 },
];
nestedData: any[];
ngOnInit() {
this.nestedData = this.getNestedData(this.data, null);
console.log(this.nestedData);
}
getNestedData(data: any[], parentId: number | null): any[] {
return data.reduce((nestedArray, item) => {
if (item.parentId === parentId) {
const children = this.getNestedData(data, item.id);
if (children.length) {
item.children = children;
}
nestedArray.push(item);
}
return nestedArray;
}, []);
}
}
在这个示例中,我们有一个名为data
的数组对象,其中包含id
,name
和parentId
属性。我们使用getNestedData
方法来将数组对象转换为嵌套数组。
在getNestedData
方法中,我们使用reduce
方法遍历data
数组。对于每个数组项,我们检查parentId
是否与给定的parentId
相匹配。如果是,则我们递归调用getNestedData
方法来获取该项的子项,并将其作为children
属性添加到该项上。最后,我们将该项添加到nestedArray
中。
通过在ngOnInit
生命周期钩子中调用getNestedData
方法并将其结果赋给nestedData
属性,我们可以在模板中使用nestedData
来显示嵌套数组。
希望这个示例代码可以帮助您将数组对象重新排列为嵌套数组!