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

Posted 2023-03-13

【中文标题】我在对象数组上使用 ngFor，而在 html 中数据未显示

【英文标题】：I am using ngFor on Array of objects and in html the data is not displaying

【发布时间】：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 应该在订阅中。

【参考方案1】：

它应该显示一个空数组，因为你有一个异步方法，如果你想在方法之后显示一个数组，你必须在 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>

第二种方式：

第一个答案中已经提到过

【讨论】：

不使用承诺它不起作用。你能解释一下为什么使用 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();