首页 > 解决方案 > 更改树视图中每个项目的文本颜色

问题描述

我使用了 Angular 7 和 ngx-treeview。如果某些条件得到验证,我想更改项目的文本颜色。

这是我的 html 文件:

<ng-template #itemTemplate let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange">
      <div class="form-inline row-item">

        <i *ngIf="item.children" (click)="onCollapseExpand()" aria-hidden="true" class="fa" [class.fa-caret-right]="item.collapsed"
          [class.fa-caret-down]="!item.collapsed"></i>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()" [disabled]="item.disabled"
            [indeterminate]="item.indeterminate" />
          <label class="form-check-label" (click)="item.checked = !item.checked; onCheckedChange()">
            {{item.text}}
          </label>

        </div>
      </div>
    </ng-template>

    <div class="row">
      <div class="col-6">
        <div class="form-group">
          <div class="d-inline-block">
            <ngx-treeview [items]="items" [itemTemplate]="itemTemplate" (selectedChange)="onSelectedChange($event)">
            </ngx-treeview>
          </div>
        </div>
      </div>

    </div>

这是我的函数,它允许填充树视图组件:

let bookObjects = new Array();
        this.testService.query({

      }).subscribe((res: HttpResponse<TestEntity[]>) => {
        this.temp= res.body;

        this.temp.forEach((x) => {


          if(x.nbr=='0')
            {
               x.     // here should normaly render the text in order to change the color
            }




            bookObjects.push(new TreeviewItem(x));
            });


      });

解决方案是知道如何呈现每个项目的文本。

标签: angularngx-treeview

解决方案


推荐阅读