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

【问题标题】：Angular 7 style the different levels of mat treeAngular 7 风格不同层次的垫子树
【发布时间】：2020-02-10 22:58:30
【问题描述】：

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

【问题讨论】：

很高兴你有一个指向 stackblitz 的链接，但也请在帖子中添加一些代码。尤其是你尝试实现的css
嗨 @John 我没有实现任何 CSS，因为我根本不知道如何为 mat-tree 做这件事。

标签： angular angular-material material-design angular7

【解决方案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;
  }

【讨论】：