Angular *ngFor 在不同的 div 上答案

【问题标题】：Angular *ngFor on different divsAngular *ngFor 在不同的 div 上
【发布时间】：2018-01-17 09:22:26
【问题描述】：

我在 angular 4 项目中有一个使用材质 flex 的标记，看起来像这样。

<div fxLayout="row">
  <div fxFlex="65">
    
  </div>
  <div fxFlex="35">
    
  </div>
</div>

我有一个这样的元素数组：

public array: [object] = [
    {
        firstName: 'value',
        lastName: 'value'
    },
    {
        firstName: 'value',
        lastName: 'value'
    },
    {
        firstName: 'value',
        lastName: 'value'
    },
    {
        firstName: 'value',
        lastName: 'value'
    },
    {
        firstName: 'value',
        lastName: 'value'
    },
];

我想遍历这个数组并在 65% div 中填充所有元素的一半，在 35% div 中填充其余元素。如何正确使用*ngFor 指令？现在我有这样的解决方案。但它看起来很糟糕，不可读。

    <div fxLayout="row">
      <div fxFlex="65">
        <div *ngFor="let item of array; let i = index">
          <div *ngIf="i < 3">
            <p>{{ item.firstName }}</p>
            <p>{{ item.lastName }}</p>
          </div>
        </div>
      </div>
      <div fxFlex="35">
        <div *ngFor="let item of array; let i = index">
          <div *ngIf="i >= 3">
            <p>{{ item.firstName }}</p>
            <p>{{ item.lastName }}</p>
          </div>
        </div>
      </div>
    </div>

还有其他解决方案吗？我也尝试使用<template> 元素。但我的尝试失败了。请帮帮我！

【问题讨论】：

元素的数量是固定且已知的，还是布局应该适应任意数量的元素？
@ConnorsFan 现在，数组是固定的，有 14 项。但未来可能会更多。

标签： angular ngfor angular-flex-layout

【解决方案1】：

您可以使用SlicePipe，如this plunker 所示。

<div fxLayout="row">
    <div fxFlex="65">
        <div *ngFor="let item of array | slice:0:half">
            <p>{{ item.firstName }}</p>
            <p>{{ item.lastName }}</p>
        </div>
    </div>
    <div fxFlex="35">
        <div *ngFor="let item of array | slice:half">
            <p>{{ item.firstName }}</p>
            <p>{{ item.lastName }}</p>
        </div>
    </div>
</div>

half 属性将在组件类中定义：

import {Component} from '@angular/core';

@Component({
  ...
})
export class Component1 {
    public array: [object] = [
        {
            firstName: 'first1',
            lastName: 'last1'
        },
        {
            firstName: 'first2',
            lastName: 'last2'
        },
        ...
    ];
    public get half(): number {
        return Math.ceil(this.array.length / 2);
    }
}

【讨论】：

不错的方法。谢谢！
不错的答案@ConnorsFan

【解决方案2】：

只需对*ngFor中的数组进行切片：

<div fxFlex="65">
    <div *ngFor="let item of array.slice(0, array.length / 2)">
        <p>{{ item.firstName }}</p>
        <p>{{ item.lastName }}</p>
    </div>
</div>
<div fxFlex="35">
    <div *ngFor="let item of array.slice(array.length / 2, array.length)">
        <p>{{ item.firstName }}</p>
        <p>{{ item.lastName }}</p>
    </div>
</div>

【讨论】：

【解决方案3】：

  <div fxLayout="row">
      <div fxFlex="65">
        <div *ngFor="let item of array.slice(0,array.length/2)">

            <p>{{ item.firstName }}</p>
            <p>{{ item.lastName }}</p>

        </div>
      </div>
      <div fxFlex="35">
        <div *ngFor="let item of array.slice(array.length/2)">

            <p>{{ item.firstName }}</p>
            <p>{{ item.lastName }}</p>

        </div>
      </div>
    </div>

使用 [ ... ].slice()

前半部分切片(0, half)

对于后半片（一半）

【讨论】：