Угловой 7 стиль различных уровней матового дерева - PullRequest
Новая
       46

Угловой 7 стиль различных уровней матового дерева

0 голосов
/ 14 октября 2019

Я реализую mat-tree, потому что мне нужно иметь разные уровни отступа в моих данных. На данный момент я в основном скопировал код из документации и изменил настройки, чтобы заставить его работать по-своему (например, удалив кнопку +), но в основном я все еще на уровне this stackblitz .
Теперь яхотел бы по-разному стилизовать различные уровни этого дерева, например, уровень 1 имеет серый фон, уровень 2 светло-серый и уровень 3 белый. Я знаю, что у меня всегда будет максимум 3 уровня вложенности в моих данных.
Но я не знаю, как определить стиль для каждого уровня.
До сих пор я ничего не нашел в документах;любое решение?

1 Ответ

1 голос
/ 14 октября 2019

Вам нужно получить уровень иерархии, а затем вы можете применить стиль. Позвольте мне показать пример.

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;
  }
...