Question

我有一个carsList数组有5个值。我尝试slice 2乘2

  <table>
    <tr *ngFor="#item of carsList | slice:0:2; #i = index">
                   <td>{{i}}. {{item}}</td>
     </tr>
 </table>

以上代码仅分割2个值。我希望切片2比2。

代码：

https://plnkr.co/edit/BZnaSIldgO3Dmwao1mo6?p=preview

请帮助我。我错了。

Answer 1

slice pipe会产生一个包含2个元素的数组，ngFor将遍历结果数组中的元素，但不会提供预期的结果。

要获得结果，您需要转换数组结构或使用嵌套ngIf的其他ngFor执行此类操作。

<table>
  <ng-container *ngFor="#item of carsList; #i = index">
    <tr *ngIf="i % 2 === 0">
      <td *ngFor="#item1 of carsList|slice:i:i + 2; #i1 = index" class="car-title">{{i1}}. {{item1}}</td>
    </tr>
  </ng-container>
</table>

或删除嵌套的ngFor，只需手动创建2 td。

<table>
  <ng-container *ngFor="#item of carsList; #i = index">
    <tr *ngIf="i %2 === 0">
      <td>{{i}}. {{item}}</td>
      <td>{{ i + 1 }}. {{carsList[i + 1]}}</td>
    </tr>
  </ng-container>
</table>

仅供参考：其中ng-container可用于对未放入DOM树的元素进行分组。

更新了plunker link。

Answer 2

Pranav的回答几乎传达了实现它的想法，但是他的掠夺者似乎并没有显示出OP的确切含义，除了看起来有点过于复杂。

根据OP中的plunker的一个简单修复就是这个（确认它在那里工作），

<ul>
 <ng-container *ngFor="#item of carsList; #i = index">
  <li *ngIf="i % 2 === 0">
   <span class="car-title">{{i}}. {{item}}</span>
  </li>
 </ng-container>
</ul>

Answer 3

试试这个 -

<ul>
 <ng-container *ngFor="#item of carsList; #i = index">
  <li *ngIf="i % 2 === 0">
   <span class="car-title">{{i}}. {{item}}</span>
   <span class="car-title">{{i+1}}. {{carsList[i + 1]}}</span>
  </li>
 </ng-container>
</ul>

如何在表格角度中将td限制切2

3 个答案: