层次缩进

不知道用什么方法来描述它,但一张图片应该有用。我有一个树结构的数据,我想用不同层次的缩进来显示它。

[1                        ]
    [1a                   ]
        [1ai              ]
    [1b                   ]
[2                        ]
[3                        ]
    [3a                   ]

等

关键是左缩进右对齐。

通过编程增加每个元素左边的填充对上半部分有效,但可能不是正确的方法。

export class HierarchicalJobNodeComponent{

  @Input() job: JobHierarchical;

  @Input() depth: number;


  pxDepth(): string {
    return this.depth + "px";
  }

  style(): Object {
    return  { 'margin-left': this.depth + "px", 'width':'100%' };
  }
}

html格式

<div class="node container" [ngStyle]="style()">
  <div class="row">
    <div class="col-sm-3">{{job.job_JobId}}</div>
    <div class="col-sm-1">{{job.job_Status}}</div>
    <div class="col-sm-8">{{job.jobDefinition_SearchName}}</div>
  </div>
  <div class="child row">
    <div *ngFor="let child of job.childJobs">
      <hjobnode [depth]="depth+20" [job]="child"></hjobnode>
    </div>
  </div>
</div>

css格式

  style(): Object {
    return  { 'padding-left': this.depth + "px", 'width':'100%' };
  }