如何将JSON数据绑定到Angular DevExtreme dx-tree-list组件

问题背景 #

你正在开发基于Angular的DevExtreme TreeList组件，希望将本地JSON数据绑定到组件中，当前已编写部分代码，需确认绑定逻辑并优化显示效果。

现有代码梳理 #

HTML模板（TreeList组件）

<dx-tree-list
    id="gridContainer"
    [dataSource]="onefollowerSource"
    keyExpr="pk"
    parentIdExpr=""
    [showRowLines]="true"
    [showBorders]="true"
    [columnAutoWidth]="true"
    [allowColumnResizing]="true"
    [columnResizingMode]="'nextColumn'"
    [allowColumnReordering]="true">
    <dxo-filter-row [visible]="true"></dxo-filter-row>
    <dxo-header-filter [visible]="true" ></dxo-header-filter>
    <dxo-scrolling mode="virtual"></dxo-scrolling>

    <dxi-column dataField="pk" caption="Id"></dxi-column>
      
    <dxi-column dataField="username" caption="Name" dataType="string">
    </dxi-column>
 
    <dxi-column dataField="full_name"></dxi-column>
    <dxi-column dataField="biography_with_entities" ></dxi-column>
    <dxi-column dataField="is_private"></dxi-column>

    <dxi-column dataField="profile_pic_url" cssClass="cell-highlighted" width="200px">
    </dxi-column>

    <dxi-column dataField="profile_pic_id"></dxi-column>
    <dxi-column dataField="is_verified"></dxi-column>
    <dxi-column dataField="has_highlight_reels" ></dxi-column>
     
</dx-tree-list>

TypeScript代码

import { Component, OnInit } from '@angular/core';
import onefollower from '../../../../../assets/json/onefollowers.json';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  onefollowerSource: any[];

  ngOnInit(): void {
    this.onefollowerSource = onefollower.user;
  }
}

JSON数据结构

{
    "user": [
        {
            "pk": 47008610225,
            "username": "franklinthomasyi",
            "full_name": "Franklin Yi",
            "is_private": true,
            "profile_pic_url": "https://instagram.fkiv7-1.fna.fbcdn.net/v/t51.2885-19/271669907_291115399702903_8999771527538334124_n.jpg?stp=dst-jpg_s150x150&_nc_ht=instagram.fkiv7-1.fna.fbcdn.net&_nc_cat=107&_nc_ohc=-YrgdW7-KwAAX-0sOvp&edm=AEF8tYYBAAAA&ccb=7-5&oh=00_AT8u-9D9TxKNVs9fmb65-vTJfieIr22-CC31Zw6fEnA1Xg&oe=62DE694B&_nc_sid=a9513d",
            "profile_pic_id": "2748471765455187210_47008610225",
            "is_verified": true,
            "has_highlight_reels": true,
            "biography_with_entities": {
                "raw_text": "I do comedy and wear a lot of Stone Cold Steve Austin T-Shirts 🥸",
                "entities": []
            }
            // 其他字段省略
        }
    ],
    "status": "ok",
    "unrelated_data": {
        "retry": 0,
        "id_acc": "7346",
        "proxy_info": "Молдова Приватный"
    },
    "time_gen": 1.58
}

关键修改与优化 #

1. 修正树形结构配置
   当前JSON数据是平级数组，无父节点关联字段，需将parentIdExpr设为undefined（或直接移除该属性），避免组件尝试解析不存在的父节点关系：

   <dx-tree-list
       ...
       [parentIdExpr]="undefined"
       ...
   >
   

2. 处理复杂字段显示

   • biography_with_entities：该字段为对象，直接绑定会显示[object Object]，需用单元格模板展示raw_text内容：

     <dxi-column caption="Biography">
         <ng-template *dxTemplate="let data of 'cell'">
             {{ data.data.biography_with_entities.raw_text }}
         </ng-template>
     </dxi-column>
     

   • profile_pic_url：需显示图片而非纯文本，使用模板渲染图片：

     <dxi-column caption="Profile Picture" cssClass="cell-highlighted" width="200px">
         <ng-template *dxTemplate="let data of 'cell'">
             <img [src]="data.data.profile_pic_url" alt="Profile Pic" style="width: 100px; height: 100px; border-radius: 50%;">
         </ng-template>
     </dxi-column>
     

3. 优化布尔字段显示
   对于is_private、is_verified这类布尔值字段，可通过模板转换为更友好的显示：

   <dxi-column dataField="is_private" caption="Private Account">
       <ng-template *dxTemplate="let data of 'cell'">
           <span>{{ data.data.is_private ? 'Yes' : 'No' }}</span>
       </ng-template>
   </dxi-column>
   

最终绑定逻辑说明 #

你已正确完成数据导入与赋值：通过import加载本地JSON文件，在ngOnInit中将onefollower.user数组赋值给onefollowerSource，再通过[dataSource]="onefollowerSource"绑定到TreeList组件。上述修改主要针对TreeList的树形配置与字段显示优化，确保数据能正确、友好地展示。

内容的提问来源于stack exchange，提问作者Legna k