tengo una plantilla :
<mat-card *ngFor="let cargo of cargos" class="cont-mat"> ... <mat-checkbox *ngFor="let truck of (getTrucksByUserIdAndRules(cargo.id) | async)" formControlName="truckId">{{truck.regNumber}}</mat-checkbox>Componente
getTrucksByUserIdAndRules(cargoId: string) { return this.cargosService.getTrucksByUserIdAndRules(this.userId, cargoId).pipe( map(response => { console.log(response.trucks); return response.trucks; }) ) }y servicio :
getTrucksByUserIdAndRules(userId: string, cargoId: string): Observable<any> { const url = BACKEND_URL_2 + "getTrucksByUserIdAndRules/" + userId + "/" + cargoId; return this.http.get(url).pipe( map(response => { return response; }) ); } Quiero obtener la lista de trucks en mi template en función de un parámetro cargo.id . Obtengo data del backend , pero la función getTrucksByUserIdAndRules(cargo.id) se llama varias veces. Sé que esta no es una buena práctica para usar funciones dentro template y cualquier otra solución será bienvenida.
En su componente constructor / ngOnInit , cargue todos los datos. Tenga en cuenta que debe hacerlo en un resolver , se procesará antes de que el componente se muestre en su navegador. Puede obtener más información sobre la resolver aquí .
trucksByCargoId: Map<number, Trucks>; constructor(private yourService: YourService) { this.trucksByCargoId = new Map(); this.cargos.forEach(cargo => { // note that I dont recommand making HTTP call inside a loop, you should make only one HTTP call for all the cargo this.yourService.getTrucksByUserIdAndRules(cargo.id).subscribe(result => { trucksByCargoId.set(cargo.id, result); }); } } y en su plantilla HTML , recupere los trucks correspondientes a la cargo con el Map que creó en su component
<mat-card *ngFor="let cargo of cargos" class="cont-mat"> ... <mat-checkbox *ngFor="let truck of trucksByCargoId.get(cargo.id)" formControlName="truckId">{{truck.regNumber}}</mat-checkbox>