Question

我是角度4的新手并试图实现angular2-tree。但我无法找到动态设置每个节点的背景颜色的方法。我试图在数据列表中传递“颜色”。请建议我。以下是我的代码：

 @Component({
  selector: 'app-checkboxes',
  template: ` 
    <h3>tri-state checkboxes</h3>
    <tree-root
      #tree
      [nodes]="nodes"
      [options]="options">

      <ng-template #treeNodeTemplate let-node="node" let-index="index"  >
      <div [contextMenu]="myContextMenu" [contextMenuSubject]="node" >
     {{ node.data.name }}&nbsp; &nbsp; 
      <input 
          type="checkbox"
          [indeterminate]="node.data.indeterminate"
          [checked]="node.data.checked"> 
          </div>
      </ng-template> 
    </tree-root>  
  `,
  styles: [
  ] 
})
// nodes that are used to bind the tree -- Class 
  nodes = [
    {
      name: 'root1',
      checked: true,
      color:this.getNextColor(1),
      actions:[{
        enabled: true,
        execute: (node: any): void => console.log(node),
        html: (node: any): string => `John custom: ${node.name}`,
        visible: true,
      }, {
        divider: true,
        visible: true,
      }, {
        enabled: true,
        execute: (item: any): void => console.log(item),
        html: (item: any): string => `John custom: ${item.name}`,
        visible: true,
      }]
    },
    {
      name: 'root2',
      checked: true,
      color:this.getNextColor(2),
      children: [
        { name: 'child1', checked: true },
        { name: 'child2', checked: true, children: [
          { name: 'grandchild1', checked: true },
          { name: 'grandchild2', checked: true }
        ] }
      ]
    }
  ];

Answer 1

尝试使用ngStyle，

<div [contextMenu]="myContextMenu" [contextMenuSubject]="node" [ngStyle]="{ 'color': node.data.color" } >
 {{ node.data.name }}&nbsp; &nbsp; 
   ...

如何在angular2-tree中设置自定义背景颜色

1 个答案: