獲取 FormArray 中的唯一值 - Angular

Question

我有一個 class 設置產品優勢的 FormArray。 此數組包含benefitGroupName和benefitSettingName屬性。 我想在我的 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;
   }
}

Model：

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

我的觀點目前正在用ngFor吐出所有的 benefitGroupName 值 我相信我需要應用的邏輯類似於benefitSettingList.benefitGroupName.filter((v, i, a) => a.indexOf(v) === i)到獲得唯一的 benefitGroupName 值，但我不確定在我的 class 中的哪個位置或如何在視圖中調用它。

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

Answer 1

使用 pipe：

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>

Answer 2

在開始時簡單地刪除基於某些屬性的重復項

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 。