algorithm - 如何在 Angular2 中重复打印另一个元素内的元素？

Question

假设我有一个字符串数组:

s : Array<string>=['Layer 1','Layer 2','Layer 3','Layer 4','Layer 5'];

很容易迭代并线性打印它们:

<div *ngFor="let st of s">{{st}}</div>

但是如果我想像这样将 div 包含到另一个 div 中怎么办:

div{
  border-color:black;
  border-style:solid;
  border-width:3px;
}

<div>Layer 1
  <div>Layer 2
    <div>Layer 3
      <div>Layer 4
        <div>Layer 5</div>
      </div>
    </div>
  </div>
</div>

是否有像这样在 div 中打印 div 的 Angular 函数？

Answer 1

据我所知，您无法在 Angular 中原生执行此操作。最简单的方法是创建自己的 nested-div 组件

nested-div.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'nested-div',
    templateUrl: './nested-div.component.html',
    styles: [`nested-div { display: block; }`]
})
export class NestedDivComponent {

    @Input() layers: string[];

    constructor() { }

    get hasMoreLayers(): boolean{
        return this.layers.length > 1;
    }
}

nested-div.component.html

{{ layers[0] }}<nested-div *ngIf="hasMoreLayers" [layers]="layers | slice:1"></nested-div>

这将生成您想要的嵌套 div 结构