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 -->

TypeScript：

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样式不同层次的垫子树

1 个答案: