Javascript 层次缩进

不确定最好的描述方式，但图片应该有用。我将数据结构化为一棵树，并希望以不同的缩进级别显示它

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

等

钥匙在左边缩进，在右边对齐

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

我使用的是一个递归的角度组件，虽然我最初没有提到角度b/c，但我认为它不一定与解决方案相关

ts

html

---

你使用填充的方法是正确的。最简单的方法是将这些项目嵌套在另一个项目中，因此您无需考虑深度

正如Chris W.指出的，这可以很容易地表示为一个列表，使用

ul

（或

ol

）和

li

s

ul，
李{
保证金：0；
填充：0；
列表样式：无；
}
li>ul{
左侧填充：20px；
}

项目1
项目2


项目2.1


项目2.1.1





项目3

项目3.1

到目前为止，您尝试了什么？你只是想用HTML和CSS来解决这个问题？（这是可行的）基本上只是描述了like

ul

&

ol

元素的用途。@lumio我更新了原来的问题，结果得到了我想要的视觉效果，我只需将样式放在第一个“row”类元素上，而不是容器元素上。也就是说，一旦我添加了更多内容，我们就会看到它是如何发展的，也许我会像你建议的那样进行重组。谢谢

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%' };
  }
}

<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>

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