Ionic ion-select value скрыть повторное значение

Question

Я показываю некоторые данные и фильтрую по ионному выбору.Я показываю данные массива в ion select.но есть некоторые значения, которые повторяются 5-6 раз.Я хочу показать значение только один раз, есть ли способ показать только одно значение?Может быть, это будет сделано с помощью фильтра.Может кто-нибудь знает, как я могу настроить его, чтобы показать значение один раз?

       <div class="col-md-3">
            <div class="form-group" >
                   <label for="">City</label>
                       <select class="form-control"  [(ngModel)]="userFilter.city"  >
                          <option *ngFor="let select of data" value="{{select.city}}">{{select.city}}</option>

                        </select>
            </div>
       </div>

.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from 'app/services/api/api.service';
import { map } from 'rxjs/operators';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'

 @Component({
selector: 'app-home',
 templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
 })
 export class HomeComponent {


  clientData: Observable<any>;
  data: any  = []; 
  status: any = [];
  countunsettled: any;
  countsettled: any;
  sums: any;

   constructor(private modalService: NgbModal, private api:ApiService, public httpClient: HttpClient) { 

   this.getClaims();

  }


userFilter: any = { claim_no:'', member_name:'', status:'', company_id: ''};

openDeal(deletecontent,x){
   this.selectedDeal = x;
    this.dealModal= this.modalService.open(deletecontent, x);
    this.dealModal.result.then(r=>{
    }, err=> console.log(err))
}



getClaims(){
 if(this.userFilter.company_id){
 let url = 'http://api.igiinsurance.com.pk:8888/insurance_IGItakaful/insurance-api/get_claims.php?company_id='+this.userFilter.company_id;
 }else{
 let url = 'http://api.igiinsurance.com.pk:8888/insurance_IGItakaful/insurance-api/get_claims.php?offset=0&limit=100';

  }
 this.clientData = this.httpClient.get(url).
 subscribe(data => {
 console.log(data);
 this.data = data.records;
 var status = 'settled';
 var status2 = 'submitted';

 var countsettled = this.data.filter((obj) => obj.status === status).length;
 var countunsettled = this.data.filter((obj) => obj.status === status2).length;

 console.log(countsettled);
 this.countsettled = countsettled;
 console.log(countunsettled);
 this.countunsettled = countunsettled;

 const sum1 = this.data.filter(item => item.status === 'settled')
                 .reduce((acc, item) => acc + Number(item.approved_value), 0);
                 console.log(sum1);
                 this.sum1 = sum1;

 const sum2 = this.data.filter(item => item.status === 'submitted')
                 .reduce((acc, item) => acc + Number(item.approved_value), 0);
                 console.log(sum2);
                 this.sum2 = sum2


     }
  }
}

Answer 1

Используйте отдельный Set для хранения названий городов, чтобы избежать дублирования значений, поскольку Set сохраняет только уникальные значения любого типа.

Машинопись:

cities:Set = new Set();

// .... other codes

this.clientData = this.httpClient.get(url).subscribe(data => { 
  this.data = data.records;

  // after loading data do the following
  // add city value to the set 
  data.forEach(d => this.cities.add(d.city))

  // ... remaining code

Шаблон:

<div class="col-md-3">
  <div class="form-group">
    <label for="">City</label>
    <select class="form-control" [(ngModel)]="userFilter.city">
      <option *ngFor="let city of cities" value="{{city}}">{{city}}</option>
    </select>
  </div>
</div>

Answer 2

Использовать пользовательский канал anuglar и отображать без повторяющихся значений в раскрывающемся списке

<div class="col-md-3">
        <div class="form-group" >
               <label for="">City</label>
                   <select class="form-control"  [(ngModel)]="userFilter.city"  >
                      <option *ngFor="let select of data | unique" value="{{select.city}}">{{select.city}}</option>

                    </select>
        </div>
   </div>

труба

@Pipe(name: 'unique') 
export class FilterPipe implements PipeTransform
{

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

      let uniqueArray = value.filter(function (el, index, array) { 
          return array.indexOf (el) == index;
      });

      return uniqueArray;   
   } 
 }