代码之家 › 专栏 › 技术社区 › arun kumar

如何将*ngFor值列表划分为两个div

angular css

0

arun kumar · 技术社区 · 7 年前

在angular中,如何将*ngFor列列表划分为两个并排的div。

set1=[1,2,3,4,5,6.....]
<div *ngFor="let person of set2">{{person }}</div>

4 回复 | 直到 7 年前

1

5

Paresh Gami 7 年前

html

<div *ngFor="let person of set1; let ind = index;">
    <div *ngIf="ind % 2 == 0">
        {{set1[ind]}} - {{set1[ind+1]}}
    </div>
</div>

ts

export class AppComponent {
    set1 = [1,2,3,4,5,6];
}

2

Pardeep Jain 7 年前

试试这个-

<div *ngFor="let person of set1; let i = index">
<div *ngIf='i%2 === 0'>Even {{person}}</div>
<div *ngIf='i%2 !== 0'>Odd {{person}}</div>
</div>

Working Example

3

0

Akash Srivastav 7 年前

<div fxLayout="row" *ngFor="let person of set2; let i = index;" >
    <div fxFlex="50%" *ngIf="i<set2.length/2">
        {{person}}
    </div>
    <div fxFlex="50%" *ngIf="i>=set2.length/2">
        {{person}}
    </div>
</div>

4

0

R. Viral 7 年前

如果你知道的话,你也可以试试 true 条件

<div *ngFor="let person of set1; let i = index">
   <div *ngIf="true-condition;else notTrue">IF {{person}}</div>
   <ng-template #notTrue>
     <div>Else {{person}}</div>
   </ng-template>
</div>

5

0

Qiqke 7 年前

https://stackoverflow.com/a/58027002/10396570

简单方法:我正在制作英雄的角度演示之旅,我想将仪表板数据*分为两列显示;(像这样)作者:ngFor

这是我现在能用的代码:

<!--repeater creates as many links as
          are in the component's heroes array.-->
    <a *ngFor="let hero of heroes;" routerLink="/detail/{{hero.id}}">       
      <!--ESTE STYLE SIRVE PARA QUE NO SE DEMADRE EL TAMAÃO DE CADA
      DIV, ELLIPSIS AYUDA EN ESTO-->
      <div style="
       width: 50%;
       float: left;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;"
       class="module hero">
          {{hero.name}}            
      </div>         
    </a>