角度4&;Ionic 3:由于http.get()调用的异步性质,无法从JSON文件填充Ionic菜单
我对Angular比较陌生,我的第一个项目是使用Ionic框架构建一个移动web应用程序。无论出于何种原因,包含所有菜单选项的JSON文件没有被读取到我的应用程序组件中 我的menu_labels变量应该是一个JSON属性数组,它返回为角度4&;Ionic 3:由于http.get()调用的异步性质,无法从JSON文件填充Ionic菜单,json,angular,asynchronous,ionic3,Json,Angular,Asynchronous,Ionic3,我对Angular比较陌生,我的第一个项目是使用Ionic框架构建一个移动web应用程序。无论出于何种原因,包含所有菜单选项的JSON文件没有被读取到我的应用程序组件中 我的menu_labels变量应该是一个JSON属性数组,它返回为undefined,这意味着跳过了我的*ngFor指令 在搜索了许多类似的问题之后,我确定问题可能是由于HTTP请求是异步的,没有及时返回供HTML文档使用。但是,针对它们的修复对我的问题不起作用 我的JSON文件摘录如下: { "pages":[ {
undefined
,这意味着跳过了我的*ngFor指令
在搜索了许多类似的问题之后,我确定问题可能是由于HTTP请求是异步的,没有及时返回供HTML文档使用。但是,针对它们的修复对我的问题不起作用
我的JSON文件摘录如下:
{
"pages":[
{
"title": "Home",
"component": "Homepage"
},
{
"title": "News",
"component": "NewsPage"
},
{
"title": "Mainframe Legacy and Managed Hosting",
"children": [
{
"title": "Mainframe Outsourcing",
"component": "MainframeOutsourcing"
},
.
.
.
我认为问题在于我在app.component.ts文件的MyApp
类中使用http.get()
函数的方式:
// Save the parsed information from http.get() in menu_labels var
menu_labels: any[];
constructor(public platform: Platform, public statusBar: StatusBar,
public splashScreen: SplashScreen, private http: Http) {
this.initializeApp();
let menu_data = this.getData();
menu_data.subscribe(data => {
this.menu_labels = data;
})
}
getData() {
// parse information from json file containing menu structure
return this.http.get('../assets/main-menu.json').map(res=> res.json().items);
}
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<!-- First Level -->
<ion-list-header *ngFor="let item of menu_labels; let i of index" no-lines no-padding>
<!-- Just Add Button If No Children -->
<ion-item *ngIf="!item.children" no-lines text-wrap>
<button ion-item (click)="openPage(item.component)">{{ item.title }}</button>
</ion-item>
.
.
.
或者,我尝试在我的app.html文件中处理异步数据的方式:
// Save the parsed information from http.get() in menu_labels var
menu_labels: any[];
constructor(public platform: Platform, public statusBar: StatusBar,
public splashScreen: SplashScreen, private http: Http) {
this.initializeApp();
let menu_data = this.getData();
menu_data.subscribe(data => {
this.menu_labels = data;
})
}
getData() {
// parse information from json file containing menu structure
return this.http.get('../assets/main-menu.json').map(res=> res.json().items);
}
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<!-- First Level -->
<ion-list-header *ngFor="let item of menu_labels; let i of index" no-lines no-padding>
<!-- Just Add Button If No Children -->
<ion-item *ngIf="!item.children" no-lines text-wrap>
<button ion-item (click)="openPage(item.component)">{{ item.title }}</button>
</ion-item>
.
.
.
菜单
{{item.title}
.
.
.
我尝试在
标记中使用*ngIf
来处理异步调用,但结果相同
有人能告诉我问题出在代码的哪一部分吗?我已经为这件事抓狂了好几个小时了。对于任何让人看不懂的代码,我提前表示歉意。这也是我的第一个Angular项目,所以尽管我上了几门基础课程,但我确信我的实现在更有经验的人看来非常难看 我认为这条线有问题
return this.http.get('./main-menu.json').map(res=> res.json().pages);
谢谢你的回复。我刚试过你的建议,但菜单上仍然没有输出。我相信问题就在那条线之前。可能是我的ngFor标签?那样的话,别碰运气。也试过了。您的建议返回了一个错误,因为菜单标签未定义。也许我使用http.get()的方式有问题,或者更一般地说,我是如何访问JSON数据的?是的!更新后的答案将填充菜单。当我尝试点击某个选项时,仍然会出错,但这比我一整天所取得的进步要大得多。谢谢大家!@克瑞斯特本兹,请你也投票给我答案好吗?收到数据后,这个菜单的输出是什么?当我把它记录到控制台时,输出是未定义的。但是,我不确定在收到数据后如何检查;替换此。控制台中未定义数据打印。现在从JSON文件获取数据肯定是个问题。