我在 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>
元素。但我的尝试失败了。请帮帮我!