javascript - 获取 FormArray 中的唯一值 - Angular

Question

我有一个类，用于设置产品优势的 FormArray。该数组包含 benefitGroupName 和 benefitSettingName 属性。我想在 html View 中循环遍历这个数组，以仅显示唯一的 benefitGroupName 值，因为其中许多都是重复的。

export class EditProductsComponent implements OnInit {
    productBenefitSettingForm: FormGroup;
    benefitSettings: FormArray;
    benefitSettingList: BenefitSettingModel[] = [];

    AddBenefitSetting() {
        const control = this.productBenefitSettingForm.controls.benefitSettings as FormArray;
        control.push(this.productBenefitSettingFormGroup());

        this.benefitSettingList.push(new BenefitSettingModel());

        this.counter++;
        this.benefitSettingList[this.counter].benefitSettingId = '';
        this.benefitSettingList[this.counter].benefitGroupId = null;
   }
}

型号:

export class BenefitSettingModel {
  benefitSettingId: string;
  benefitSettingName: string;
  benefitGroupId: number;
  benefitGroupName: string;
}

我的 View 当前正在使用 ngFor 吐出所有 BenefitGroupName 值 我认为我需要应用的逻辑类似于 benefitSettingList.benefitGroupName.filter((v, i, a) => a.indexOf(v) === i) 来获取唯一的 BenefitGroupName 值，但是我不确定在类(class)的哪个位置执行此操作或如何在 View 中调用它。

<div formArrayName="benefitSettings" *ngFor="let benefitSetting of productBenefitSettingForm.get('benefitSettings')['controls']; let i = index; let last = last">
  {{benefitSettingList[i].benefitGroupName}}
</div>

Answer 1

使用管道:

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

@Pipe({
  name: 'unique',
  pure: false
})

export class UniquePipe implements PipeTransform {
    transform(value: any): any{
        if(value!== undefined && value!== null){
            return [...new Set(value)]; ;
        }
        return value;
    }
}

像这样使用它:

<ul>
  <li *ngFor="let benefit of this.benefits | unique">
    {{benefit.benefitSettingName}}
  </li>
</ul>