javascript 逗号分隔字符串使用ngFor与一个条件?

twh00eeo  于 2023-04-28  发布在  Java
关注(0)|答案(5)|浏览(136)

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

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>

但我终于又多了一个逗号。我该怎么去掉它?
任何帮助将不胜感激。谢谢!

mzaanser

mzaanser1#

last没有被应用的原因是因为最后一个元素不是“action”类型。
作为修复,您可以创建一个自定义函数来首先过滤初始数据并应用相同的逻辑,

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

DEMO

6qftjkof

6qftjkof2#

由于type = action的过滤发生在ngForOf内部,最后一个元素仍然不计数,因此对于您的情况,last始终为false。
我已经添加了一个新的数组,它是基于类型= action在typescript过滤,这对我来说很有效。参见下面stackblitz的例子。
https://stackblitz.com/edit/angular-dfhpan

nkkqxpd9

nkkqxpd93#

我会使用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>
kupeojn6

kupeojn64#

你不能使用'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,它将过滤数组并保持对“最后”绑定的正确跟踪
manyexamples,所以我不会在这里提供另一个副本,你只需要使用它作为

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

qmelpv7a5#

您可以在每个项目值之前添加条件逗号,如:

<ng-container *ngFor="let item of list; let i = index">  
   <span *ngIf="i > 0">, </span><span> {{ item.value }} </span>
</ng-container>

<ng-container *ngFor="let item of list; let i = index">  
  {{ i > 0 ? ', ': '' }} {{ item.value }}
</ng-container>

相关问题