Блог

В настоящее время я работаю над проектом в Angular, где мне нужно сгенерировать вложенное дерево с переключателями (Mat-Tree), используя API, в котором есть данные JSON, я уже использовал его со статическими данными, и все работает нормально, используя этот stackblitz, но я не могу разобраться с динамическими данными, я протестировал свойAPI в Postman и реализовать в angular, который работает нормально. но я не знаю, как отображать данные в формате дерева, например, родительского дочернего элемента.

Функция API в Angular

 getqualificationData(articleid, clientid) {
return this.http.post<any>(this.SERVERURL   this.AppSettings.getqualificationData,{ articleid: articleid, clientid: clientid });
} 
 

Данные JSON—

   {
        "label": "Focus",
        "labelid": 27645,
        "dd1": "Company",
        "dd1id": 74506,
        "dd2": "Other",
        "dd2id": 111673,
        "dd1selection": null,
        "dd2selection": null
    }
 

Здесь label является родительским, а rest dd1, dd2, dd1selection, dd2selection являются дочерними.

Мой текущий код со статическими данными

HTML

     <mat-radio-group aria-labelledby="example-radio-group-label" class="example-radio-group"
                        [(ngModel)]="favoriteFruit">

                        <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="main-tree">
                            <!-- This is the tree node template for leaf nodes -->
                            <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
                                <li class="mat-tree-node">
                                    <!-- use a disabled button to provide padding for tree leaf -->
                                    <button mat-icon-button disabled></button>
                                    <mat-radio-button [value]="node.id">{{node.name}} {{node.id}}</mat-radio-button>

                                </li>
                            </mat-tree-node>
                            <!-- This is the tree node template for expandable nodes -->
                            <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
                                <li>
                                    <div class="mat-tree-node">
                                        <button mat-icon-button matTreeNodeToggle
                                            [attr.aria-label]="'toggle '   node.name">
                                            <mat-icon class="mat-icon-rtl-mirror">
                                                {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                                            </mat-icon>
                                        </button>
                                        <mat-radio-button [value]="node.id">{{node.name}} {{node.id}}
                                        </mat-radio-button>

                                    </div>
                                    <ul [class.main-tree-invisible]="!treeControl.isExpanded(node)">
                                        <ng-container matTreeNodeOutlet></ng-container>
                                    </ul>
                                </li>
                            </mat-nested-tree-node>
                        </mat-tree>


                    </mat-radio-group>
 

TS-файл-

     interface FoodNode {
  name: string;
  id: number;
  children?: FoodNode[];
}

const TREE_DATA: FoodNode[] = [
  {
    name: "Fruit",
    id: 0,
    children: [
      { name: "Apple", id: 1 },
      { name: "Banana", id: 2 },
      { name: "Fruit loops", id: 3 },
    ],
  },
  {
    name: "Vegetables",
    id: 4,
    children: [
      {
        name: "Green",
        id: 5,
        children: [
          { name: "Broccoli", id: 6 },
          { name: "Brussel sprouts", id: 7 },
        ],
      },
      {
        name: "Orange",
        id: 8,
        children: [{ name: "Pumpkins", id: 9 }, { name: "Carrots", id: 10 }],
      },
    ],
  },
];

@Component({
  selector: "app-qualification",
  templateUrl: "./qualification.component.html",
  styleUrls: ["./qualification.component.css"],
})
export class QualificationComponent implements OnInit {
  favoriteFruit: string;
  treeControl = new NestedTreeControl<FoodNode>((node) => node.children);
  dataSource = new MatTreeNestedDataSource<FoodNode>();

  constructor(private _location: Location) {
    this.dataSource.data = TREE_DATA;
  }

  ngOnInit() {
    var self = this;
  }
  hasChild = (_: number, node: FoodNode) =>
    !!node.children amp;amp; node.children.length > 0;

 
}