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

【问题标题】：I am using ngFor on Array of objects and in html the data is not displaying我在对象数组上使用 ngFor，而在 html 中数据未显示
【发布时间】：2019-02-19 05:37:35
【问题描述】：

我是角度和东西的新手。

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

[]
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');
 }

【问题讨论】：

你能添加如何将数据分配给states var的代码吗？
是添加的组件，你也想看服务部分吗？
没问题。我解决了你的问题，但在我的浏览器中我什至看不到这个例子：w3schools.com/html/html_form_elements.asp。它只是空的
您说：Below is the format of the array which is I am getting in the console. 并且数组中有数据。后来你说：[...] when i am printing in console it shows undefined。这根本不符合逻辑。那么当你在控制台中记录数组时，它是否显示数据呢？
console.log 应该在订阅中。

标签： arrays angular typescript angular6 ngfor

【解决方案1】：

它应该显示一个空数组，因为你有一个异步方法，如果你想在方法之后显示一个数组，你必须在 html 中使用 aysnc /wait 或 asyn pip：

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

&lt;option  *ngFor="let state of states" [value]="state.name"&gt;{{state.name}}&lt;/option&gt;

第二种方式：

第一个答案中已经提到过

【讨论】：

不使用承诺它不起作用。你能解释一下为什么使用 toPromise 吗？使用 rxjs 6.3.x 和 angular 6

【解决方案2】：

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

但是，如果您想先对结果进行一些处理，则可以通过在组件的更改检测器上调用 detectChanges 来通知 Angular 以检测您的更改。

例如：

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);
 }
}

【讨论】：

好吧，这行得通，而所有其他都行不通，所以我的问题是为什么在 Angular 中没有适当的迭代和可观察文档，这太混乱了。
它也可以在没有 changeDetector 的情况下工作，由于模型绑定而存在其他角度错误，因此数据未在 html 中显示。

【解决方案3】：

这样试试，

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

【讨论】：

【解决方案4】：

venueService.getStates() 是asynchronous 函数。

试试下面。

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：