我在对象数组上使用 ngFor，但在 html 中数据未显示

Question

我是 angular 之类的新手。

下面是我在控制台中获取的数组格式。

[]
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"}

ngFor 的

和 HTML 是：

<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：我在 api 调用和接口期间使用 Observable，所以这将是我的服务方法：

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

Answer 1

这样试试，

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

Answer 2

venueService.getStates() 是 asynchronous 函数。

试试下面的方法。

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

Answer 3

在您的 HTML 中使用 async 管道并将 states 设置为从您的服务返回的可观察值。

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

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

Answer 4

如果您可以直接从您的服务中使用 Observable，就像您的示例所暗示的那样，那么 Joseph Webber 的回答将获得我的投票。

但是，如果您想先对结果执行一些处理，那么您可以通知 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 5

它应该显示一个空数组，因为你有一个异步方法，如果你想在方法之后显示一个数组，你必须在 html:

中使用 aysnc /wait 或 asyn pip

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

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

第二种方式：

第一个回答里已经提到了

我在对象数组上使用 ngFor，但在 html 中数据未显示

I am using ngFor on Array of objects and in html the data is not displaying

arrays

typescript

ngfor

angular

angular6