web-dev-qa-db-fra.com

Arbre angulaire à 6 matériaux

J'essaie de faire un arbre angulaire matériel basé sur docs mais semble avoir rencontré une erreur que je n'arrive pas à diagnostiquer. Chromes donne une erreur qui Cannot read property 'children' of undefined à la ligne 8 de mon HTML. Il semble que l’arbre soit chargé dans nestedDataSource parfaitement, mais il n’affiche rien. Certes, je ne suis pas tout à fait sûr de savoir comment fonctionne l’arbre Matériau angulaire, alors j’ai peut-être tout simplement foiré le html.

Sur angulaire 6.01

category-picker.component.html:

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="category-picker">
  <mat-tree-node *matTreeNodeDef="let node">
    <li class="mat-tree-node">
      {{node.category.name}}
    </li>
  </mat-tree-node>

  <mat-nested-tree-node *matTreeNodeDef="let node; when: node.children.length">
    <li>
      {{node.category.name}}
      <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

category-picker.component.ts:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import {NestedTreeControl} from '@angular/cdk/tree';

import {MatSelectModule} from '@angular/material';
import {MatTreeNestedDataSource} from '@angular/material/tree';

import { DataBrokerService } from '../data-broker.service';
import { Category } from '../datatypes'
import { observable, of } from 'rxjs';

export class CategoryNode {
  children: CategoryNode[];
  category: Category;
}


@Component({
  selector: 'app-category-picker',
  templateUrl: './category-picker.component.html',
  styleUrls: ['./category-picker.component.scss']
})
export class CategoryPickerComponent implements OnInit {

  // Does not follow main/sub category - just has a simple category!
  @Input() categoryID: number;
  @Output() categoryIDChange:EventEmitter<number> = new EventEmitter<number>();

  nestedTreeControl: NestedTreeControl<CategoryNode>;

  nestedDataSource: MatTreeNestedDataSource<CategoryNode>;

  constructor(
    private dataBrokerService: DataBrokerService
  ) { 
    this.nestedTreeControl = new NestedTreeControl(node => of(node.children));
    this.nestedDataSource = new MatTreeNestedDataSource();
  }

  ngOnInit() {
    this.dataBrokerService.getCategories().subscribe(categories => this.nestedDataSource.data = this.buildTree(categories));
  }

  onChange(){
    this.categoryIDChange.emit(this.categoryID);
  }

  private buildTree(categories:Category[]):CategoryNode[]{
    console.log("tree");

    let tree:CategoryNode[] = [];
    let map: {[s:number]: CategoryNode} = {};

    // Build an index of the nodes
    categories.forEach(cat => {
      map[cat.id] = {children:[], category:cat};
    });

    // Start adding nodes to tree 
    for (let key of Object.keys(map)){
      let catNode = map[+key];

      if (map[catNode.category.parent_id]){
        // Add it to the parent
        map[catNode.category.parent_id].children.Push(catNode);
      }
      else{
        // Add it to root
        tree.Push(catNode);
      }
    };
    console.log(tree);
    return tree;
  }
}
angularangular-material
2
BobtheMagicMoose

Il s’est avéré que j’avais mal implémenté la fonction 'when' de MatTreeNodeDef. Dans mon HTML, je devais changer when: node.children.length en when: hasNestedChild qui est défini comme = (_: number, nodeData) => {return nodeData.children.length} dans le fichier .ts. En d’autres termes, quand est un paramètre obligatoire qui prend une fonction avec deux entrées (nombre et nœud).

4
BobtheMagicMoose

category-picker.component.html: <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">

category-picker.component.ts: hasNestedChild=(_: number, nodeData) => {return nodeData.children.length}

0
Adnan Cindioglu