我在角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>
元素。但我的尝试失败了。
请帮帮我!
答案 0 :(得分: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 :(得分:1)
只需在*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>
答案 2 :(得分: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,一半)
为下半部分(一半)