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中，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

是否有角度函数来像这样在div中打印div？

Answer 1

据我所知，你不能在Angular本地做这件事。最简单的方法是创建自己的nested-div组件

<强>嵌套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>

这将生成您之后的嵌套div结构

Answer 2

我可以通过获取* ngFor的索引并为每个层提供大量margin-left来将一个div包含在另一个div中。这就是我想出的：

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

这是一个掠夺者：https://plnkr.co/edit/JZ6hVM3KVfjbnJe0zGTe?p=preview

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

2 个答案: