En mi Angular-12, tengo esta respuesta JSON desde el extremo de la API:
{ "message": "vehicle Model Detail.", "error": false, "code": 200, "results": { "vehiclemakes": [{ "name": "Freightliner", "id": 15 }, { "name": "Honda", "id": 13 }, { "name": "Renault", "id": 3 }, { "name": "Suzuki", "id": 16 }, { "name": "Toyota", "id": 4, }, { "name": "Volkswagen", "id": 6 }, { "name": "Volvo", "id": 5 } ] } }Servicio:
public getParameters(): Observable<any> { return this.http.get(this.api.baseURL + 'parameters', this.httpOptions); }Componente:
vehicles!: any[]; loadAllVehicles() { this.vehiclemodelService.getParameters().subscribe( data => { this.vehicles = data.results.vehicles; }, error => { this.store.dispatch(loadErrorMessagesSuccess(error)); } ); } ngOnInit(): void { this.loadAllVehicles(); }Debo cargar esto en una lista de selección desplegable:
HTML:
<ng-select [items]="vehicles" [selectOnTab]="true" [searchable]="true" bindValue="name" bindLabel="make_id" placeholder="Select Vehicle Make" [multiple]="false" [clearable]="true" required formControlName="make_id"> </ng-select>Cuando cargué el formulario y hice clic en la lista desplegable de selección, parece que hay datos, pero no muestra nada.
¿Cómo soluciono esto?
Gracias
Debido a que this.vehicles se llena de forma asíncrona, así es como funciona .subscribe(). Cuando se procesa su ng-select, this.vehicles no contiene su respuesta api.
Una manera simple de manejar esto:
html:
<ng-select [items]="vehicles$ | async" [selectOnTab]="true" [searchable]="true" bindValue="name" bindLabel="make_id" placeholder="Select Vehicle Make" [multiple]="false" [clearable]="true" required formControlName="make_id"> </ng-select>t:
vehicles$!: Observable<any[]>; loadAllVehicles() { this.vehicles$ = this.vehiclemodelService.getParameters().pipe( map(data => data.results.vehicles) catchError(() => { this.store.dispatch(loadErrorMessagesSuccess(error)); return of(null); }), ); } ngOnInit(): void { this.loadAllVehicles(); }En sus datos de muestra, la propiedad se llama results.vehiclemakes , y cuando está asignando valor a this.vehicles , usó results.vehicles . Entonces, solo cambia eso a:
this.vehicles = data.results.vehiclemakes; Como mencionó @Nenad, results.vehicles no es válido en su JSON. Tienes que usar results.vehiclemakes .
make_id no es válido en el objeto de vehiclemakes . Mientras tanto, la propiedad bindLabel se usa para mostrar la etiqueta, mientras que bindValue se usa para el valor. Con el código existente, las opciones generadas mostrarán id como etiqueta con el nombre como valor .
<ng-select bindValue="name" bindLabel="make_id"> </ng-select>vehicles con data.results.vehiclemakes .bindLabel con name y bindValue con id ..componente.ts
loadAllVehicles() { this.vehiclemodelService.getParameters().subscribe( data => { this.vehicles = data.results.vehiclemakes; }, error => { this.store.dispatch(loadErrorMessagesSuccess(error)); } ); }.componente.html
<ng-select [items]="vehicles" [selectOnTab]="true" [searchable]="true" bindValue="id" bindLabel="name" placeholder="Select Vehicle Make" [multiple]="false" [clearable]="true" required formControlName="make_id"> </ng-select>