Question

我正在尝试使用ptree17 5显示数组，但我无法弄清楚如何以我想要的方式显示它。例如，下一个数组：

*ngFor

是一个对象数组，因此我使用Pipe来按[BMW, Apple, Mercedes, LG, Banana, iPhone]属性过滤数组，在这种情况下，我有type，Car Type和Food Type。订购的数组将是：

Mobile Type

嗯，我的问题是我想以这种方式展示：

[BMW, Mercedes, Apple, Banana, iPhone, LG]

使用此模板：

CARS:

-BMW
-Mercedes

FOOD

-Apple
-Banana

MOBILE

-iPhone
-LG

但我得到的是：

<div *ngFor="let item of items | orderPipe" >
    <div *nfIf="item.type == 'Car'>
        <h3>Cars</h3>
        {{ item.name }}
    </div>
</div>

Answer 1

您可能希望将数组转换为嵌套数组。

let transformedArray = [{
  type: 'Cars',
  items: ['BMW', 'Mercedes'],
},{
  type: 'Food',
  items: ['Apple', 'Banana'],
},{
  type: 'Mobile',
  items: ['iPhone', 'LG']
}];

然后使用嵌套的ngFors

<div *ngFor="let outer of transformedArray">
    {{outer.type}}:
    <div *ngFor="let inner of outer.items>
        -{{inner}}
    </div>
</div>

因此，最终您可以在转换数组时进行排序，而不是在管道中进行排序。

Answer 2

如果您的数组已按展示的类型排序，只需在标题周围添加*ngIf：

<div *ngFor="let item of items | orderPipe; let i=index"" >
    <h3 *ngIf="i==0 || items[i-1].type!=items[i].type">{{item.type}}</h3>
        {{ item.name }}
    </div>
</div>

这将在第一次迭代i==0上打印标题，每次类型更改时都会打印 - items[i-1].type != items[i].type。

显示按类型分隔的ngFor数组

2 个答案: