如何将 *ngFor 值列表分成两个 div答案

【问题标题】：How to divide *ngFor list of values into two divs如何将 *ngFor 值列表分成两个 div
【发布时间】：2019-05-12 05:29:33
【问题描述】：

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

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

【问题讨论】：

请说明您的目标是什么，以及您为实现该目标而编写的所有代码。那么给出解决方案会很有帮助
我猜你想要两个不同的列。你可以先根据自己的需要再做一个 set 数组，然后在两个 div 中使用另一个 *ngFor 指令。
这可能会有所帮助stackoverflow.com/questions/43093786/using-angular2-ngfor-index/…

标签： css angular

【解决方案1】：

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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

和我的回答很相似
看起来优化然后你的。
很好，但我想知道它在什么意义上被优化了？还有什么，如果是ind%2 !==0？
为什么要 ngIf 需要兄弟？
兄弟根据提出的问题，他需要显示每个元素，但在不同的 div 中。所以我们也应该需要ind%2 !==0

【解决方案4】：

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

【讨论】：

@PardeepJain 不，我相信它不会，因为那样它根本不会输入 *ngFor

【解决方案5】：

试试这个 -

<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

【讨论】：

如何使这个并排的 divs