如何制作mat-tree组件Angular Material 6.0.1 [英] How to make mat-tree component Angular Material 6.0.1

问题描述

我正在尝试做一个基于材料角度mat-tree的应用程序，但当我运行此代码时，它不显示值，我没有得到任何错误我如何解决这个帮助我前进

当我们打开应用程序时，我们需要显示类名

下面我添加了我的html和组件代码

 < mat-nested-tree-node * matTreeNodeDef =let node; when：hasNestedChild> 
< li> 
< div class =mat-tree-node> 
< button mat-icon-button matTreeNodeToggle 
 [attr.aria-label] ='toggle'+ node.filename> 
< mat-icon class =mat-icon-rtl-mirror> 
 {{nestedTreeControl.isExpanded（node）？ 'expand_more'：'chevron_right'}} 
< / mat-icon> 
< / button> 
 
< / div> 
< ul [class.example-tree-invisible] =！nestedTreeControl.isExpanded（node）> 
< ng-container matTreeNodeOutlet>< / ng-container> 
< / ul> 
< / li> 
< / mat-nested-tree-node> 
  

组件：

  const TREE_DATA = [
 {
class：ece，
count：60，
学生：[
 
 {name：a，id：11}，
 {name：b，id：12}，
 {name ：c，id：13}，
 {name：d，id：14} 
 
] 
} ，
 {
class：mech，
count：60，
学生：[
 
 {name： r，id：21}，
 {name：e，id：22}，
 {name：w，id ：23}，
 {name：q，id：24} 
 
] 
} 
]; 
 
 
 @Injectable（）
导出类FileDatabase {
 dataChange = new BehaviorSubject< FileNode []>（[]）; 
 
 get data（）：FileNode [] {return this.dataChange.value; } 
 
 constructor（）{
 this.initialize（）; 
} 
 
 initialize（）{
 
 const dataObject = TREE_DATA; 
 
 
 const data = this.buildFileTree（dataObject，0）; 
 
 
 this.dataChange.next（data）; 
} 
 
 
 buildFileTree（obj：object，level：number）：FileNode [] {
返回Object.keys（obj）.reduce< FileNode []> ;（（累加器，密钥）=> {
 const value = obj [key]; 
 const node = new FileNode（）; 
 node.filename = key; 
 
 if（value！= null）{
 if（typeof value ==='object'）{
 node.children = this.buildFileTree（value，level + 1）; 
 } else {
 node.type = value; 
} 
} 
 
 return accumulator.concat（node）; 
}，[]）; 
} 
} 
 
 / ** 
 * @title具有嵌套节点的树
 * / 
 @Component（{
 selector：'tree-nested-overview-example'，
 templateUrl：'tree-nested-overview-example.html'，
 styleUrls：['tree-nested-overview-example.css']， 
 providers：[FileDatabase] 
}）
 export class TreeNestedOverviewExample {
 nestedTreeControl：NestedTreeControl< FileNode> ;; 
 nestedDataSource：MatTreeNestedDataSource< FileNode> ;; 
 
构造函数（数据库：FileDatabase）{
 this.nestedTreeControl = new NestedTreeControl< FileNode>（this._getChildren）; 
 this.nestedDataSource = new MatTreeNestedDataSource（）; 
 
 database.dataChange.subscribe（data => this.nestedDataSource.data = data）; 
} 
 
 hasNestedChild =（_：number，nodeData：FileNode）=> ！nodeData.type; 
 
 private _getChildren =（node：FileNode）=> node.children; 
} 
  

这是我的

当我点击ece它应该是这样的

解决方案

它添加了{{node：json}}以下的内容，您只需要从节点对象中获取正确的数据。

 < button mat-icon-button matTreeNodeToggle 
 [attr.aria-label] ='toggle'+ node.filename> 
< mat-icon class =mat-icon-rtl-mirror> 
 {{nestedTreeControl.isExpanded（node）？ 'expand_more'：'chevron_right'}} 
< / mat-icon> 
 {{node | json}} 
< / button> 
  

I am trying to do a material angular mat-tree based app but when i run this code it is not displaying values and i am not getting any error how can i resolve this help me out to move forward

when we open app we need to show class names

below i have added my html and component code

<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
    <li>
      <div class="mat-tree-node">
        <button mat-icon-button matTreeNodeToggle
                [attr.aria-label]="'toggle ' + node.filename">
          <mat-icon class="mat-icon-rtl-mirror">
            {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>

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

component:

const TREE_DATA = [
{
    "class":"ece",
    "count":60,
    "students": [

            {"name":"a","id":"11"},
            {"name":"b","id":"12"},
            {"name":"c","id":"13"},
            {"name":"d","id":"14"}

    ]
},
{
    "class":"mech",
    "count":60,
    "students": [

            {"name":"r","id":"21"},
            {"name":"e","id":"22"},
            {"name":"w","id":"23"},
            {"name":"q","id":"24"}

    ]
}
];


@Injectable()
export class FileDatabase {
  dataChange = new BehaviorSubject<FileNode[]>([]);

  get data(): FileNode[] { return this.dataChange.value; }

  constructor() {
    this.initialize();
  }

  initialize() {

    const dataObject = TREE_DATA;


    const data = this.buildFileTree(dataObject, 0);


    this.dataChange.next(data);
  }


  buildFileTree(obj: object, level: number): FileNode[] {
    return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
      const value = obj[key];
      const node = new FileNode();
      node.filename = key;

      if (value != null) {
        if (typeof value === 'object') {
          node.children = this.buildFileTree(value, level + 1);
        } else {
          node.type = value;
        }
      }

      return accumulator.concat(node);
    }, []);
  }
}

/**
 * @title Tree with nested nodes
 */
@Component({
  selector: 'tree-nested-overview-example',
  templateUrl: 'tree-nested-overview-example.html',
  styleUrls: ['tree-nested-overview-example.css'],
  providers: [FileDatabase]
})
export class TreeNestedOverviewExample {
  nestedTreeControl: NestedTreeControl<FileNode>;
  nestedDataSource: MatTreeNestedDataSource<FileNode>;

  constructor(database: FileDatabase) {
    this.nestedTreeControl = new NestedTreeControl<FileNode>(this._getChildren);
    this.nestedDataSource = new MatTreeNestedDataSource();

    database.dataChange.subscribe(data => this.nestedDataSource.data = data);
  }

  hasNestedChild = (_: number, nodeData: FileNode) => !nodeData.type;

  private _getChildren = (node: FileNode) => node.children;
}

here is my demo

when i open page it should come like this

when i click ece it should come like this

解决方案

It has the content below {{node :json}} added, you just need to get the correct data out of the node object.

    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.filename">
      <mat-icon class="mat-icon-rtl-mirror">
        {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
      {{node | json}}
    </button>

这篇关于如何制作mat-tree组件Angular Material 6.0.1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！