別の要素の中の要素をAngular2で繰り返し印刷する方法は？

Question

Suppost私は文字列の配列を持っている：

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をこのように印刷する角度関数はありますか？

Answer 1

私が知っている限り、あなたはAngularでこれをネイティブに行うことはできません。最も簡単な方法は、これが生成されます

入れ子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; 
    } 
} 

入れ子div.component.html

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

を独自のnested-divコンポーネントを作成することですあなたが後になっているネストされたdiv構造

Answer 2

oを囲むことができます別のdivのdivを* ngForのインデックスを取って、各レイヤーに多くの量のmargin-leftを与えてdivを作成します。これは私が思い付いたものです：

<div *ngFor="let st of s;let i = index"> 
     <span [ngStyle]="{'margin-left': i + 'rem' }">{{st}}</span> 
    </div> 

ここplunkerです：https://plnkr.co/edit/JZ6hVM3KVfjbnJe0zGTe?p=preview