我是棱角分明的新手。
下面是我在控制台中获取的数组格式。
[]
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');
}
如果您可以直接从您的服务中使用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);
}
}
它应该显示一个空数组,因为如果你想在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>
第二种方式:
它已在第一个答案中提到
试试这样,
<option *ngFor="let state of states" [ngValue]="state">{{state.name}}</option>
venueService.getStates()
是asynchronous
功能。
试试以下。
ngOnInit(){
this.venueService.getStates()
.subscribe(state => {
state.forEach(entry=>{
this.states.push(entry);
});
console.log(this.states);
});
}
在HTML中使用async
管道,并将states
设置为从您的服务返回的observable。
<option *ngFor="let state of states | async" [value]="state.name">{{state.name}}</option>
ngOnInit(){
this.states = this.venueService.getStates();
}