首页 文章

Angular * ngFor在不同的div上

提问于
浏览 次
2

我在角4项目中使用了材质flex的标记，看起来像这样 .

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

  </div>
  <div fxFlex="35">

  </div>
</div>

enter image description here

我有一系列这样的元素：

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> 元素 . 但我的尝试失败了 . 请帮助我！

angular ngfor angular-flex-layout

3 回答

  • 7

    您可以使用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);
    }
}
    回复于
  • 1

    只需在_2607429中切片数组：

    <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>
    回复于
  • 1
    <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，半）用于后半切片（半）

    回复于

相关问题