con *ngFor, no puedo obtener los datos de mi componente.ts en mi componente.html
El mismo método funciona para una clase pero no funciona para otra clase.
Aquí está mi clase de servicio
export class FoodListService { private url = environment.serverURL; constructor(private http: HttpClient) { } //get all products from one store getAllProducts(storeId: Number): Observable<FoodListModelServer[]> { return this.http.get<FoodListModelServer[]>(this.url + 'foodlist/' + storeId); }Aquí está mi clase de componente
export class FoodListComponent implements OnInit { foodlist: FoodListModelServer[] = []; constructor(private foodListService: FoodListService, private router: Router, private route: ActivatedRoute) {} ngOnInit(): void { this.foodListService.getAllProducts(this.storeId).subscribe(food => { this.foodlist = food; console.log(this.foodlist); }); } }Aquí está mi componente.html
<div class="col-md-8 col-lg-10 col-sm-6 card"> <li *ngFor="let foodlist of foodlist"> {{foodlist.food_name}} </li> </div>Console.log(esta.listadealimentos)
Obtengo y objeto {recuento: 5, tiendas: Array(5)}
¿Por qué obtengo un conteo incluido que forma un objeto en lugar de solo el Array?
¿Cómo obtengo solo la matriz?
Tengo el mismo código con el otro componente y funciona bien. Intenté todo lo mencionado en línea sin ningún progreso.
¿Por qué obtengo un conteo incluido que forma un objeto en lugar de solo el Array?
¿Cómo obtengo solo la matriz?
this.http.get<FoodListModelServerResponse>map RxJs - map(response => response.stores) (encuentre más información aquí: https://www.learnrxjs.io/learn-rxjs/operators/transformation/map )getAllProducts y obtendrá la matriz import { map } from 'rxjs/operators'; export interface FoodListModelServerResponse { count: number; stores: FoodListModelServer[]; } export class FoodListService { private url = environment.serverURL; constructor(private http: HttpClient) { } getAllProducts(storeId: Number): Observable<FoodListModelServer[]> { return this.http.get<FoodListModelServerResponse >(this.url + 'foodlist/' + storeId) .pipe(map(response => response.stores)); }entonces puedes usar tu implementación
ngOnInit(): void { this.foodListService.getAllProducts(this.storeId).subscribe(food => { this.foodlist = food; console.log(this.foodlist); }); } }Utilice el operador de extracción de RxJs para extraer las stores del objeto de respuesta. Declare la variable lista de alimentos como foodlist$: Observable<FoodListModelServer[]> foodlist que se pueda asignar a observable.
En foodService devuelve Observable<any> como getAllProducts(storeId: Number): Observable<any>
import { pluck} from 'rxjs/operators'; import { Observable } from 'rxjs'; export class FoodListComponent implements OnInit { foodlist$: Observable<FoodListModelServer[]>; constructor(private foodListService: FoodListService, private router: Router, private route: ActivatedRoute) {} ngOnInit(): void { this.foodlist$ = this.foodListService.getAllProducts(this.storeId).pipe( pluck('stores') ); } } En el uso de la plantilla Async pipe , se encargará de suscribirse y cancelar la suscripción a su foodListService.getAllProducts
<div class="col-md-8 col-lg-10 col-sm-6 card"> <li *ngFor="let foodlist of foodlist$ | async"> {{foodlist.food_name}} </li> </div>