Angular 7种风格不同层次的垫子树

Question

我正在实施 mat-tree 因为我需要在我的数据中有不同级别的缩进。现在我基本上是从文档中复制代码并进行调整以使其按我的方式工作（比如删除 + 按钮），但基本上我仍然处于 this stackblitz .
的水平现在我想为这棵树的各个级别设置不同的样式，例如级别 1 具有背景灰色，级别 2 浅灰色和级别 3 白色。我知道我的数据中总是最多有 3 层嵌套。
但是我不知道如何指定每个级别的样式。
到目前为止，我在文档中什么也没找到；任何解决方案？

Answer 1

您需要获取层次结构级别，然后才能应用样式。让我举个例子。

HTML:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle 
      matTreeNodePadding level="level">
    <div [style.background]="getColor(node)">
      <button mat-icon-button disabled></button>      
      <mat-checkbox class="checklist-leaf-node"
                  [checked]="checklistSelection.isSelected(node)"
                  (change)="todoLeafItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
    </div>
  </mat-tree-node>

  <!-- Other code is omitted for the brevity -->

打字稿：

getColor(node){
    let level = this.getLevel(node);
    let color = '';
    switch (level) {
            case 1:
                color = 'grey'
                break;
            case 2:
                color = 'lightgrey'
                break;
            default:
                color = 'white'
        }
    return color;
  }

Angular 7种风格不同层次的垫子树

Angular 7 style the different levels of mat tree

material-design

angular-material

angular

angular7