ngFor 循环中的重复数据 Angular 16

Question

我有一个 ngFor 循环，在 ionic 6 搜索栏中包含重复的数据。我已经证明了“trackBy”和“map”。

我知道这个网站上有相同的主题，但是从 2020 年开始的，也许有一些新的方式。

¿有人知道另一种方法吗？

谢谢你。

page.ts：

 handleInput(event) {
  
    this.text= event.target.value;

    let body= new FormData();
    body.append('busqueda', this.text)
    
    this.http.post(this._ABSPATH_+'/app/complexsearch/', body).subscribe(res=>{

      // Dado que es un proceso cíclico, hay que volver a poner toto a 0
      this.showList4=false;
      this.showList1=false;
      this.showList3=false;
      this.showList2=false;
      this.showList5=false;

      this.muni=res;  
     
       
        if(this.text && this.text.trim != null){
          this.show=true;
        
          this.searchedMun= this.muni;
          this.searchedMun1= this.muni;
          this.searchedMun2= this.muni;
          this.searchedMun3= this.muni;
          this.searchedMun4= this.muni;
          
          for(let i=0; i<this.muni.length; i++){
  
          this.miType=this.muni[i].busquedatipo;
          let miTit=this.muni[i].titulo;
       

          if(this.miType=='evento'){
            this.searchedMun= this.searchedMun.filter((muni:any)=>{
          
              return (muni.titulo);       
            })
            this.showList=true;
          }
          if(this.miType=='provincia'){
            this.searchedMun1= this.searchedMun1.filter((muni:any)=>{
              return (muni.provincia);       
            }) 
            
            this.showList1=true;
          }
          if(this.miType=='municipio'){
            this.searchedMun2= this.searchedMun2.filter((muni:any)=>{
              return (muni.municipio);  
                  
            }) 
            
            this.showList2=true; 
          }
          if(this.miType=='ubicacion'){
            this.searchedMun3= this.searchedMun3.filter((muni:any)=>{
              return (muni.nombre);                    
            }) 
            
            this.showList3=true; 
          }

        }
      }
    })// Fin petición POST
   
  } 

page.html：

 <ion-searchbar value="" show-clear-button="focus" placeholder="Buscar evento, categoría o localización" color="light" search-icon="search-sharp"  [debounce]="300" 
      (ionInput)="handleInput($event)" (ionClear)="cancel()"></ion-searchbar>

    <ion-card id="listSearch" *ngIf="show">
      <ion-card-content>
        <ion-list *ngIf="showList">
          <ion-label>Eventos</ion-label>
          <ion-item *ngFor="let mun of searchedMun" [routerLink]="['/ficha-evento',mun.code]">            
              <ion-label>{{mun.titulo}}</ion-label>                
          </ion-item>
        </ion-list>
        <ion-list  *ngIf="showList1">
          <ion-label>Provincia</ion-label>
          <ion-item *ngFor="let mun of searchedMun1" [routerLink]="['/reel2',mun.provincia,'provincia']">            
              <ion-label>{{mun.provincia}} <span class="diferenciar">Provincia</span></ion-label>                
          </ion-item>
        </ion-list>
        <ion-list  *ngIf="showList2">
          <ion-label>Municipios</ion-label>
          <ion-item *ngFor="let mun of searchedMun2" [routerLink]="['/reel2',mun.municipio,'municipio']">            
              <ion-label>{{mun.municipio}} <span class="diferenciar">Municipio</span></ion-label>                
          </ion-item>
        </ion-list>
        <ion-list  *ngIf="showList3">
          <ion-label>Lugares</ion-label>
          <ion-item *ngFor="let mun of searchedMun3" [routerLink]="['/reel2',mun.municipio,'municipio']">            
              <ion-label>{{mun.nombre}} <span class="diferenciar">Municipio</span></ion-label>                
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>

每个元素都有不同的索引，因此“trackBy：索引不起作用”。

Answer 1

最后我用另一种过滤方法解决了这个问题，如这篇文章所示：

如何使用扩展运算符从对象数组中删除重复项。

我的代码是：

 if(this.miType=='provincia'){
            this.searchedMun1= this.searchedMun1.filter((muni:any)=>{
              return (muni.provincia);       
            }) 
            
            this.test=[
              ...new Map(this.searchedMun1.map(item=>[item.provincia,item])).values()
            ]

            this.showList1=true;
          }

后来在 *ngFor 中，我调用“test”而不是“searchedMuni”。