Получить уникальные значения в FormArray - Angular

Question

У меня есть класс, который устанавливает FormArray Преимущества продукта. Этот массив содержит свойства benefitGroupName и benefitSettingName. Я бы хотел, чтобы l oop через этот массив в моем представлении html отображал только уникальные значения 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;
}

Мой взгляд в настоящее время выделяет все значения выгодыGroupName с помощью ngFor Лог c Я считаю, что мне нужно применить что-то вроде benefitSettingList.benefitGroupName.filter((v, i, a) => a.indexOf(v) === i) чтобы получить уникальные значения BenefitGroupName, но я не уверен, где в моем классе это сделать или как вызвать его в представлении.

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

Answer 1

Чтобы просто удалить дубликаты на основе какого-либо свойства один раз в начале

const newList: BenefitSettingModel[] = [];
this.benefits.forEach((benefit: BenefitSettingModel) => {
  if (!newList.some(x => x.benefitGroupName === benefit.benefitGroupName)) {
    newList.push(benefit);
  }
});

, после этого вы можете использовать этот новый список для визуализации html элементов.

Обновить

Обычно вам не нужно сильно изменять, прежде чем передать его Angular, вы фильтруете его на дубликаты:

  ngOnInit() {
    this.productBenefitSettingForm = this.fb.group({
      benefitSettings: this.fb.array([])
    });

    this.dataService.getBenefits()
      .subscribe((receivedBenefits: BenefitSettingModel[]) => {

        // dump received benefits (possibly with duplicates)
        console.log(JSON.stringify(receivedBenefits, null, 2));

        // filter out duplicates
        const newList: BenefitSettingModel[] = [];
        receivedBenefits.forEach((benefit: BenefitSettingModel) => {
          if (!newList.some(x => x.benefitGroupName === benefit.benefitGroupName)) {
            newList.push(benefit);
          }
        });

        // get reference to the form array
        const fa = this.productBenefitSettingForm.controls["benefitSettings"] as FormArray;

        // fill the form with the list (without any duplicates)
        newList.forEach((b: BenefitSettingModel) => {
          fa.push(this.addBenefitSetting(b.benefitSettingId, b.benefitGroupId));
        });
      });
  }

в html:

<form [formGroup]="productBenefitSettingForm">
    <div formArrayName="benefitSettings">
        <div *ngFor="let optionGroup of productBenefitSettingForm.controls['benefitSettings'].controls;  let i=index">
            <div [formGroupName]="i">
                <input type="text" formControlName="benefitSettingId">
                <input type="text" formControlName="benefitGroupId">
          </div>
        </div>
    </div>
</form>

Проверьте это работает Stackblitz .

Answer 2

Используйте трубу:

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>