时间戳

首页 > 解决方案 > Angular Material 2更改根后代复选框颜色

angular - Angular Material 2更改根后代复选框颜色

问题描述

我正在使用带有复选框的角度材料 2 树，我想动态更改复选框颜色。简单的方法是单击它（触发（更改）事件）并更改MatCheckboxChange.source.color。问题是，当我单击根节点时，有什么方法可以获取所有后代复选框源（更改所有后代的颜色）？这里的例子

模板

<mat-checkbox class="checklist-leaf-node"
              [checked]="checklistSelection.isSelected(node)"
              (change)="todoLeafItemSelectionToggle(node, $event)">{{node.item}}</mat-checkbox>

代码

todoLeafItemSelectionToggle(node: TodoItemFlatNode, event: MatCheckboxChange): void {
    event.source.color = 'warn'; // <---

    this.checklistSelection.toggle(node);
    this.checkAllParentsSelection(node);
  }

标签： angularangular-material2

解决方案

向模板添加颜色变量

<mat-checkbox class="checklist-leaf-node"
          [checked]="checklistSelection.isSelected(node)"
          [color]="color"
          (change)="todoLeafItemSelectionToggle(node, $event)">{{node.item}}</mat-checkbox>

然后在你的 javascript

this.color = 'primary';
this.color = 'accent';
this.color = 'warn';

编辑：

用于动态颜色[color]="checklistSelection.isSelected(getParentNode(node)) ? 'primary' : 'warn'"

推荐阅读