使用带有条件的 ngFor 逗号分隔字符串？答案

【问题标题】：comma separated string using ngFor with a condition?使用带有条件的 ngFor 逗号分隔字符串？
【发布时间】：2020-01-19 18:33:20
【问题描述】：

我想从数组中生成逗号分隔的字符串。

这是我的数据：

responseData= [{ name: 'Some Data 1', type:'action' }, 
               { name: 'Some Data 2', type:'action' },
               { name: 'Data 3', type:'NA' }, 
               { name: 'Data 4', type:'action' },
               { name: 'Data 5', type:'NA' }];

这就是我循环的方式。 我只想循环遍历action 类型。

<div *ngFor="let data of responseData; let last=last">
    <div *ngIf="data.type=='action'">
        {{ data.name}} {{last?'':', '}}
    </div>
</div>

但我最后还剩下一个逗号。如何删除它？

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： javascript angular

【解决方案1】：

last 没有被应用的原因是最后一个元素不是“action”类型。

作为一个修复，您可以创建一个自定义函数来首先过滤初始数据并应用相同的逻辑，

<div *ngFor="let data of filterFunction(responsedata); last as isLast">
    <div >
        {{ data.name}}  {{isLast?'':', '}}
    </div>
</div>

DEMO

【讨论】：

感谢您的回答。这可以在没有typescript中的函数或变量的html上实现@
不，你不能。您可以使用管道代替，这又必须使用 TS 完成

【解决方案2】：

由于 type = action 的过滤发生在 ngForOf 内部，最后一个元素仍未计算在内，因此对于您的情况，最后一个元素始终为 false。

我添加了一个新数组，该数组根据打字稿中的 type = action 进行过滤，并且对我有用。请参阅下面的 stackblitz 示例。

https://stackblitz.com/edit/angular-dfhpan

【讨论】：

【解决方案3】：

我会为此使用pipe：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'listify'})
export class ListifyPipe implements PipeTransform {
    transform(responseData: Array<any>, responseType: string): string {
        return responseData
            .filter(r => r.type === responseType)
            .map(r => r.name)
            .join();
    }
}

然后调用它

<div>{{responseData | listify : 'action'}}</div>

【讨论】：

【解决方案4】：

您不能将“last”绑定（就像检查当前迭代索引 + 1 是否等于数组长度）与视觉过滤的数组一起使用 - 它不起作用，因为实际数组索引不会受到影响你的过滤。

您可以在将数组用于模板之前对其进行过滤：

responseData= [
 { name: 'Some Data 1', type:'action' }, 
 { name: 'Some Data 2', type:'action' },
 { name: 'Data 3', type:'NA' }, 
 { name: 'Data 4', type:'action' },
 { name: 'Data 5', type:'NA' }
]
.filter(item => item.type === 'action');

然后，在你的模板中使用它而不过滤

<div *ngFor="let data of responseData; let last=last">
    {{ data.name}} {{last?'':', '}}
</div>

...或者，更好的是，创建一个custom pipe，它将过滤数组并正确跟踪“最后一个”绑定

有many examples，这里就不多发了，你自己用就好了

...*ngFor="let item of myArray | myFilter;let last...

【讨论】：