Я использую ngFor на массиве объектов и в HTML данные не отображаются

Question

Я новичок в угловой и прочее.

Ниже приведен формат массива, который я получаю в консоли.

[]
0: {_id: "5b90fb38345c932d46e61dae", name: "Andhra Pradesh", abbvr: "AP"}
1: {_id: "5b90fb38345c932d46e61daf", name: "Arunachal Pradesh", abbvr: "AR"}
2: {_id: "5b90fb38345c932d46e61db1", name: "Bihar", abbvr: "BR"}
3: {_id: "5b90fb38345c932d46e61db6", name: "Gujarat", abbvr: "GJ"}
4: {_id: "5b90fb38345c932d46e61db3", name: "Chhattisgarh", abbvr: "CG"}
5: {_id: "5b90fb38345c932d46e61db8", name: "Himachal Pradesh", abbvr: "HP"}
6: {_id: "5b90fb38345c932d46e61dbb", name: "Karnataka", abbvr: "KA"}
7: {_id: "5b90fb38345c932d46e61dbd", name: "Madhya Pradesh", abbvr: "MP"}
8: {_id: "5b90fb38345c932d46e61dc0", name: "Odisha", abbvr: "OR"}
9: {_id: "5b90fb38345c932d46e61dc2", name: "Punjab", abbvr: "PB"}
10: {_id: "5b90fb38345c932d46e61dc5", name: "Tamil Nadu", abbvr: "TN"}
11: {_id: "5b90fb38345c932d46e61dc7", name: "Tripura", abbvr: "TR"}
12: {_id: "5b90fb38345c932d46e61dca", name: "West Bengal", abbvr: "WB"}
13: {_id: "5b90fb38345c932d46e61db2", name: "Chandigarh", abbvr: "CD"}
14: {_id: "5b90fb38345c932d46e61dcc", name: "Andaman and Nicobar Islands", abbvr: "AN"}
15: {_id: "5b90fb38345c932d46e61db7", name: "Haryana", abbvr: "HR"}
16: {_id: "5b90fb38345c932d46e61dbc", name: "Kerala", abbvr: "KL"}
17: {_id: "5b90fb38345c932d46e61dc1", name: "Puducherry", abbvr: "PY"}
18: {_id: "5b90fb38345c932d46e61dc6", name: "Telangana", abbvr: "TL"}
19: {_id: "5b90fb38345c932d46e61dcb", name: "Manipur", abbvr: "MN"}
20: {_id: "5b90fb38345c932d46e61db0", name: "Assam", abbvr: "AS"}
21: {_id: "5b90fb38345c932d46e61db4", name: "Delhi", abbvr: "DL"}
22: {_id: "5b90fb38345c932d46e61db9", name: "Jammu and Kashmir", abbvr: "JK"}
23: {_id: "5b90fb38345c932d46e61db5", name: "Goa", abbvr: "GA"}
24: {_id: "5b90fb38345c932d46e61dbe", name: "Maharashtra", abbvr: "MH"}
25: {_id: "5b90fb38345c932d46e61dc3", name: "Rajasthan", abbvr: "RJ"}
26: {_id: "5b90fb38345c932d46e61dba", name: "Jharkhand", abbvr: "JH"}
27: {_id: "5b90fb38345c932d46e61dbf", name: "Meghalaya", abbvr: "ML"}
28: {_id: "5b90fb38345c932d46e61dc8", name: "Uttar Pradesh", abbvr: "UP"}
29: {_id: "5b90fb38345c932d46e61dcd", name: "Mizoram", abbvr: "MZ"}
30: {_id: "5b90fb38345c932d46e61dc4", name: "Sikkim", abbvr: "SK"}
31: {_id: "5b90fb38345c932d46e61dc9", name: "Uttarakhand", abbvr: "UK"}
32: {_id: "5b90fb38345c932d46e61dce", name: "Nagaland", abbvr: "NL"}

и HTML для ngFor:

<option  *ngFor="let state of states" [value]="state.name">{{state.name}}</option>

На дисплее есть номер опции, но ничего не видно, когда я печатаю в консоли, отображается неопределенное

Редактировать 1: Ниже приведен код компонентов, который использует сервис

import { Component, OnInit } from '@angular/core';
import {VenueService} from './venue.service';


@Component({
  selector: 'app-workshop',
  templateUrl: './workshop.component.html',
  styleUrls: ['./workshop.component.css']
})
export class WorkshopComponent  {
states=[];
  constructor(private venueService: VenueService) {

  }
  ngOnInit(){
   this.venueService.getStates().subscribe(state => {
     state.forEach(entry=>{
       this.states.push(entry);
     });
    });
    console.log(this.states);
  }

}  

Редактировать 2: я использую Observable во время вызова API и интерфейса, так что это будет мой метод обслуживания выглядит так:

getStates(): Observable<State[]>{
return http.get<State[]>('http://localhost:3000/api/getstate');
 }

Answer 1

Должен отображаться пустой массив, потому что у вас есть асинхронный метод, если вы хотите отобразить массив после метода, вы должны использовать aysnc / wait или asyn pip в html:

  async ngOnInit()
  {     const states= await                               
       this.venueService.getStates().toPromise();
        console.log(states);
  }

<option  *ngFor="let state of states" [value]="state.name">{{state.name}}</option>

Для второго пути:

это уже упоминалось в первом ответе

Answer 2

Если вы можете использовать Observable непосредственно из своего сервиса, как подсказывает ваш пример, тогда ответ Джозефа Уэббера получит мой голос.

Однако, если вы хотите сначала выполнить некоторую обработку результата, вы можете уведомить angular об обнаружении вашего изменения, вызвав detectChanges на детекторе изменений компонента.

Например:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { VenueService } from './venue.service';

@Component({
  selector: 'app-workshop',
  templateUrl: './workshop.component.html',
  styleUrls: ['./workshop.component.css']
})
export class WorkshopComponent implements OnInit  {
  states = [];
  constructor(private venueService: VenueService,
    private changeDetector: ChangeDetectorRef) {
  }

  ngOnInit() {
    this.venueService.getStates().subscribe(state => {
      // Do some stuff with the results ... 
      state.forEach(entry => {
        this.states.push(entry);
      });
      // Let angular know.
      this.changeDetector.detectChanges();
  });
  console.log(this.states);
 }
}

Answer 3

venueService.getStates() - это функция asynchronous.

Попробуйте ниже.

  ngOnInit(){
   this.venueService.getStates()
         .subscribe(state => {
             state.forEach(entry=>{
               this.states.push(entry);
           });
         console.log(this.states);
        });
  }

Answer 4

Используйте канал async в своем HTML и установите states на наблюдаемое, возвращаемое вашим сервисом.

<option *ngFor="let state of states | async" [value]="state.name">{{state.name}}</option>

ngOnInit(){
  this.states = this.venueService.getStates();
}

Answer 5

Попробуй вот так,

<option  *ngFor="let state of states" [ngValue]="state">{{state.name}}</option>