Угловая труба для удаления двойников

Question

У меня есть выпадающее меню, в котором перечислены все коды стран клиента.На данный момент у меня проблема с тем, что у меня много двойных записей, то есть если у меня три клиента из Индии, мой выпадающий список покажет IN, IN, IN вместо одного раза.Я думал, что смогу это исправить с помощью трубы, но пока не понимаю, как это реализовать.

ниже моя труба (которая пуста, потому что я не могу понять код):

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

@Pipe({
  name: 'duplicates'
})
export class DuplicatesPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    
    return value;


  }

}

и вот мой html выпадающий:

  <strong class="ml-2">Country</strong>
     <select class="ml-1" name="countryCode" [(ngModel)]="countryCode" (change)="gender = ''" (change)="activeStatus = ''">
  <option></option>
  <option *ngFor="let customer of customerArray">{{customer.countryCode | duplicates}}</option>
 </select>

Answer 1

вы должны применить канал к массиву, по которому вы перебираете.

например, что-то вроде этого:

@Pipe({ name: "uniqueCountryCodes" })
export class UniqueCountryCodesPipe implements PipeTransform {

  transform(customers: Customer[], args?: any): any { 
    return customers.map(c => c.countryCode).filter((code, currentIndex, allCodes) => allCodes.indexOf(code) === currentIndex);
  }

}

использование:

<option *ngFor="let code of (customerArray | uniqueCountryCodes)">{{ code }}</option>

имейте в видучто до тех пор, пока канал не является нечистым , он фильтрует только один раз и не будет обновлять коды страны при добавлении нового клиента в customerArray.

Answer 2

Здесь вам не нужен конвейер, вы можете просто удалить дубликаты из самого customerArray перед привязкой.

let filteredCustomerArray = [];
this.customerArray.filter(cust=>filteredCustomerArray.indexOf(cust.countryCode) === -1 &&
filteredCustomerArray.push(cust.countryCode));

теперь выполните ngFor для этого массива.