Question

IN angular如何将* ngFor列列表分为两个并排的div。

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

Answer 1

尝试-

<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

Answer 2

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];
}

Answer 3

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

Answer 4

如果您知道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>

Answer 5

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

简便方法：我正在制作Angular演示英雄巡游，我想将仪表板数据* ngFor显示分为两列；（像这样）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>

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

5 个答案:

html

ts