Angular 使用数据布尔展开/折叠材质树（角度7）

我试图从数据源中获取一个使用布尔运算的材质树。我正在过滤输入上的datasource.data，这会导致每次用户输入内容时树都会崩溃。为了避免这种情况，我希望在特定行中使用布尔值来展开/折叠材质树。我已经用material表成功地完成了这项工作，但无法使它与树一起工作。这就是我到目前为止所做的：

HTML文件：

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

  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
    <li>
      <div class="mat-tree-node">
        <button mat-icon-button
                [attr.aria-label]="'toggle ' + node.name"
                click="changeState(node)">
          <mat-icon class="mat-icon-rtl-mirror">
            {{node.expanded ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.name}} ({{node.expanded}})
      </div>
      <ul [class.example-tree-invisible]="node.expanded">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

import {NestedTreeControl} from '@angular/cdk/tree';
import {Component, Injectable} from '@angular/core';
import {MatTreeNestedDataSource} from '@angular/material/tree';
import {BehaviorSubject} from 'rxjs';

/**
 * Json node data with nested structure. Each node has a filename and a value or a list of children
 */
export class FileNode {
  childGroups: FileNode[];
  name: string;
  expanded: boolean;
}

/**
 * The Json tree data in string. The data could be parsed into Json object
 */
const TREE_DATA = [
  {
  'name': 'Group 1',
  'expanded': false,
  'childGroups': [
    {
      'name': 'Childgroup 1',
      'expanded': false,
      'childGroups': []
    },
    {
      'name': 'Childgroup 2',
      'expanded': false,
      'childGroups': [
        {
          'name': 'Child of child',
          'expanded': false,
          'childGroups': []
        }
      ]
    }
    ]
  },
    {
  'name': 'Group 2',
  'expanded': false,
  'childGroups': [
    {
      'name': 'Childgroup 1',
      'expanded': false,
      'childGroups': []
    },
    {
      'name': 'Childgroup 2',
      'expanded': false,
      'childGroups': [
        {
          'name': 'Child of child',
          'expanded': false,
          'childGroups': []
        }
      ]
    }
    ]
  },
    {
  'name': 'Group 3',
  'expanded': false,
  'childGroups': [
    {
      'name': 'Childgroup 1',
      'expanded': false,
      'childGroups': []
    },
    {
      'name': 'Childgroup 2',
      'expanded': false,
      'childGroups': [
        {
          'name': 'Child of child',
          'expanded': false,
          'childGroups': []
        }
      ]
    }
    ]
  },
]

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

  constructor() {
    this.nestedTreeControl = new NestedTreeControl<FileNode>(this._getChildren);
    this.nestedDataSource = new MatTreeNestedDataSource();
    this.nestedDataSource.data = TREE_DATA;
  }

  hasNestedChild = (_: number, nodeData: FileNode) => 
  nodeData.childGroups.length > 0;

  private _getChildren = (node: FileNode) => node.childGroups;

  changeState(node) {
    console.log(node);
    node.expanded = !node.expanded;
  }
}

{{node.name}


{{node.expanded？'expande_more'：'chevron_right'}
{{node.name}}（{{node.expanded}}）

TS文件：

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

  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
    <li>
      <div class="mat-tree-node">
        <button mat-icon-button
                [attr.aria-label]="'toggle ' + node.name"
                click="changeState(node)">
          <mat-icon class="mat-icon-rtl-mirror">
            {{node.expanded ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.name}} ({{node.expanded}})
      </div>
      <ul [class.example-tree-invisible]="node.expanded">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

import {NestedTreeControl} from '@angular/cdk/tree';
import {Component, Injectable} from '@angular/core';
import {MatTreeNestedDataSource} from '@angular/material/tree';
import {BehaviorSubject} from 'rxjs';

/**
 * Json node data with nested structure. Each node has a filename and a value or a list of children
 */
export class FileNode {
  childGroups: FileNode[];
  name: string;
  expanded: boolean;
}

/**
 * The Json tree data in string. The data could be parsed into Json object
 */
const TREE_DATA = [
  {
  'name': 'Group 1',
  'expanded': false,
  'childGroups': [
    {
      'name': 'Childgroup 1',
      'expanded': false,
      'childGroups': []
    },
    {
      'name': 'Childgroup 2',
      'expanded': false,
      'childGroups': [
        {
          'name': 'Child of child',
          'expanded': false,
          'childGroups': []
        }
      ]
    }
    ]
  },
    {
  'name': 'Group 2',
  'expanded': false,
  'childGroups': [
    {
      'name': 'Childgroup 1',
      'expanded': false,
      'childGroups': []
    },
    {
      'name': 'Childgroup 2',
      'expanded': false,
      'childGroups': [
        {
          'name': 'Child of child',
          'expanded': false,
          'childGroups': []
        }
      ]
    }
    ]
  },
    {
  'name': 'Group 3',
  'expanded': false,
  'childGroups': [
    {
      'name': 'Childgroup 1',
      'expanded': false,
      'childGroups': []
    },
    {
      'name': 'Childgroup 2',
      'expanded': false,
      'childGroups': [
        {
          'name': 'Child of child',
          'expanded': false,
          'childGroups': []
        }
      ]
    }
    ]
  },
]

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

  constructor() {
    this.nestedTreeControl = new NestedTreeControl<FileNode>(this._getChildren);
    this.nestedDataSource = new MatTreeNestedDataSource();
    this.nestedDataSource.data = TREE_DATA;
  }

  hasNestedChild = (_: number, nodeData: FileNode) => 
  nodeData.childGroups.length > 0;

  private _getChildren = (node: FileNode) => node.childGroups;

  changeState(node) {
    console.log(node);
    node.expanded = !node.expanded;
  }
}

从'@angular/cdk/tree'导入{NestedTreeControl}；
从“@angular/core”导入{Component，Injectable}；
从“@angular/material/tree”导入{MatTreeNestedDataSource}；
从“rxjs”导入{BehaviorSubject}；
/**
*具有嵌套结构的Json节点数据。每个节点都有一个文件名和一个值或子节点列表
*/
导出类文件节点{
子组：FileNode[]；
名称：字符串；
扩展：布尔；
}
/**
*字符串形式的Json树数据。数据可以解析为Json对象
*/
常数树_数据=[
{
“名称”：“组1”，
“扩展”：错误，
“儿童团体”：[
{
'name'：'childgroup1'，
“扩展”：错误，
“儿童组”：[]
},
{
'name'：'childgroup2'，
“扩展”：错误，
“儿童团体”：[
{
'姓名'：'孩子的孩子'，
“扩展”：错误，
“儿童组”：[]
}
]
}
]
},
{
“名称”：“组2”，
“扩展”：错误，
“儿童团体”：[
{
'name'：'childgroup1'，
“扩展”：错误，
“儿童组”：[]
},
{
'name'：'childgroup2'，
“扩展”：错误，
“儿童团体”：[
{
'姓名'：'孩子的孩子'，
“扩展”：错误，
“儿童组”：[]
}
]
}
]
},
{
“名称”：“第3组”，
“扩展”：错误，
“儿童团体”：[
{
'name'：'childgroup1'，
“扩展”：错误，
“儿童组”：[]
},
{
'name'：'childgroup2'，
“扩展”：错误，
“儿童团体”：[
{
'姓名'：'孩子的孩子'，
“扩展”：错误，
“儿童组”：[]
}
]
}
]
},
]
@组成部分({
选择器：“树嵌套概览示例”，
templateUrl:“树嵌套概览示例.html”，
样式URL:['tree-nested-overview-example.css']
})
导出类TreenestedOverview示例{
nestedTreeControl：nestedTreeControl；
嵌套数据源：MatTreeNestedDataSource；
构造函数（）{
this.nestedTreeControl=新的nestedTreeControl（this.\u getChildren）；
this.nestedDataSource=new MatTreeNestedDataSource（）；
this.nestedDataSource.data=树\数据；
}
hasNestedChild=（uxAE:number，nodeData:FileNode）=>
nodeData.childGroups.length>0；
private\u getChildren=（节点：FileNode）=>node.childGroups；
变更状态（节点）{
console.log（节点）；
node.expanded=！node.expanded；
}
}

来自：

要绑定到DOM事件，请将DOM事件名称括在括号中，并为其分配一个带引号的模板语句

您只需将单击更改为（单击）

我希望这对你有帮助