0

quisiera su gentil apoyo, estoy realizando tablas dinamica que son por los tipo: es decir quisiera que se pinte el titulo ejemplo CENTRO ORIENTE_IND Y Toda su información de CENTRO ORIENTE_IND Y así sucesivamente tengo un objeto en html.component que se muestra así usando este código: {{dataSource | json}}

[ { "RINDTAB": 1, "hdester": "CENTRO ORIENTE_IND", "HCOLBT": "TYVEP100", "HCOLNOM": "VEGA PENADILLO YENSEN", "TOTAL_MES": 5180 }, { "RINDTAB": 1, "hdester": "NOR ANDINO_IND", "HCOLBT": "TASUQ100", "HCOLNOM": "SULLUCHUCO QUISPE ANDERSON MIGUEL", "TOTAL_MES": 5100 }, { "RINDTAB": 1, "hdester": "LIMA SELVA_IND", "HCOLBT": "TOESJ100", "HCOLNOM": "ESPINOZA JAPA OSCAR RONAL", "TOTAL_MES": 4600 }, { "RINDTAB": 1, "hdester": "SUR_IND", "HCOLBT": "TDVAC100", "HCOLNOM": "VASQUEZ CHINO DIEGO JESUS", "TOTAL_MES": 4500 }]

he creado un div dinamico con un *ngFor que me va mostrar los titulos de cada tabla

 <div  *ngFor="let item of letfortable;let i = index" fxFlex style="padding: 25px;padding-top: 50px;"> 
              
                <stg-window-bar [title]="item.hdester" titleAlign="center center" fontSize="20px" style="padding-top: 50px;"></stg-window-bar>
                  
  {{dataSource |  json}}  
                
            </div>  

introducir la descripción de la imagen aquí

Quisiera que dentro de mi Objeto dataSource haga un filtro con el titulo , es decir si el titulo indica CENTRO ORIENTE_IND solo debe estar la información de CENTRO ORIENTE_IND

LA INFORMACIÓN DE letForTable

[ { "RINDTAB": 1, "hdester": "CENTRO ORIENTE_IND" }, { "RINDTAB": 2, "hdester": "LIMA SELVA_IND" }, { "RINDTAB": 3, "hdester": "NOR ANDINO_IND" }, { "RINDTAB": 4, "hdester": "SUR_IND" } ] 

LA INFORMACIÓN DE dataSource

[ { "RINDTAB": 1, "hdester": "CENTRO ORIENTE_IND", "HCOLBT": "TYVEP100", "HCOLNOM": "VEGA PENADILLO YENSEN", "TOTAL_MES": 5180 }, { "RINDTAB": 1, "hdester": "NOR ANDINO_IND", "HCOLBT": "TASUQ100", "HCOLNOM": "SULLUCHUCO QUISPE ANDERSON MIGUEL", "TOTAL_MES": 5100 }, { "RINDTAB": 1, "hdester": "LIMA SELVA_IND", "HCOLBT": "TOESJ100", "HCOLNOM": "ESPINOZA JAPA OSCAR RONAL", "TOTAL_MES": 4600 }, { "RINDTAB": 1, "hdester": "SUR_IND", "HCOLBT": "TDVAC100", "HCOLNOM": "VASQUEZ CHINO DIEGO JESUS", "TOTAL_MES": 4500 }]

Actualmente dataSource muestra todo pero quisiera que se filtre

he avanzado con este codigo y ya se muestra en cada uno pero al momento cuando coloco esa data en [dataSource]=" item" sale un error adjunto print

 <div  *ngFor="let items of letfortable;let i = index"   >
   
    <stg-window-bar [title]="items.hdester  " titleAlign="center center" fontSize="20px" style="padding-top: 50px;"></stg-window-bar>
    <div *ngFor="let item of dataSource "   > 
        <div *ngIf="item.hdester ==items.hdester" >
             {{   item  | json }}   
             <stg-table2   [options]="options" [dataSource]="  item" [headers]="headers" [optionsObserver]="optObs" >
            </stg-table2>  
         </div> 
    </div>  
</div>  

introducir la descripción de la imagen aquí

1 respuesta 1

0

Primero debes de checar si con la variable con la que estés trabajando sea un array, ya que el error te indica que no se identifica correctamente.

En este caso que proviene de una sola fuente de datos te recomiendo que lo filtres mediante un pipe. Ya que el pipe se ejecutará cada que detecte nuevos cambios respecto a las variables con el que se está configurando y no se estará produciendo sobrecarga en el render.

import { Pipe, PipeTransform } from '@angular/core';
    
@Pipe({name: 'itemByTable'})
export class ItemByTablePipe implements PipeTransform {
  transform(list: [], item: any): any[] {
    if(!list) {
     return [];
    }
    return list.filter(x => x.value === item.value);
  }
}
 <div  *ngFor="let items of letfortable;let i = index"  >
   ...
    <div *ngFor="let item of dataSource |  itemByTable: items"   > 
             <stg-table2 [dataSource]="item" ... >
            </stg-table2>  
         </div> 
    </div>  
</div>  

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.