Angular 4 & Ionic 3:由于 http.get() 调用的异步特性,无法从 JSON 文件填充 Ionic 菜单

cjs

我对 Angular 比较陌生,我的第一个项目是使用 Ionic 框架构建一个移动 Web 应用程序。无论出于何种原因,我的包含所有菜单选项的 JSON 文件都没有被读入我的 App 组件。

我的 menu_labels 变量(应该是 JSON 属性的数组)返回 as undefined,这意味着我的 *ngFor 指令被跳过。

<ion-list-header *ngFor="let item of menu_labels; let i of index" no-lines no-padding>

在搜索了许多与此类似的问题后,我确定问题可能是由于 HTTP 请求是异步的,并且没有及时返回以供我的 HTML 文档使用。但是,对它们的修复对我的问题不起作用。

我的 JSON 文件的摘录如下所示:

{
"pages":[
    {
        "title": "Home",
        "component": "Homepage"
    },
    {
        "title": "News",
        "component": "NewsPage"
    },
    {
        "title": "Mainframe Legacy and Managed Hosting",
        "children": [
            {
                "title": "Mainframe Outsourcing",
                "component": "MainframeOutsourcing"
            },
.
.
.

我相信问题在于http.get()MyAppapp.component.ts文件的类中使用该函数的方式

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

或者以我尝试处理app.html文件中异步数据的方式

<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>
.
.
.

我尝试*ngIf<ion-list>标签中使用来处理异步调用,但结果相同。

谁能告诉我问题出在代码的哪一部分?几个小时以来,我一直在为此挠头。我提前为任何令人痛苦的代码道歉。这也是我的第一个 Angular 项目,所以即使我参加了几门基础课程,我确信我的实现对于更有经验的人来说看起来非常难看。

维维克多西

我认为这条线有问题,

return this.http.get('./main-menu.json').map(res=> res.json().pages);

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

无法在 html 中以 angular 4 ionic 3 显示数组对象

来自分类Dev

模拟$ http Angular Ionic

来自分类Dev

Ionic 4,Angular 8和HTTP拦截器

来自分类Dev

Http.get()工作正常,但在Ionic 4中无法在build(Release / Debug)中工作

来自分类Dev

Angular&Ionic,HTTP Get无法在真实设备IOS中工作

来自分类Dev

将 json 对象与 Ionic 3 Angular 4 中的下拉列表集成

来自分类Dev

IONIC 4 - 离子菜单不与页面重叠

来自分类Dev

在 ts 文件(Angular 4 & ionic 3)中渲染时,onclick 函数不起作用

来自分类Dev

Angular/Ionic 链式 HTTP 调用不同步

来自分类Dev

我的侧边菜单使用Angular在Ionic4下覆盖了我主页的html内容

来自分类Dev

Ionic 2 / Angular - 操作 JSON

来自分类Dev

Ionic 3 Angular 4:Visual Studio Code 还是 WebStorm?

来自分类Dev

Ionic 3 侧边菜单标题中心

来自分类Dev

ionic4 @ ionic / angular ionChange或ion-select在表单重置时无法正常工作

来自分类Dev

无法在ionic2中打开菜单

来自分类Dev

无法在ionic2中打开菜单

来自分类Dev

Ionic Firebase Angular 异步验证

来自分类Dev

在http get ionic中获得空响应

来自分类Dev

限制 IONIC 侧边菜单自动填充大屏幕

来自分类Dev

Angular 7 Cli 不在 Ionic 4 项目中应用 angular.json 原理图选项

来自分类Dev

如何在Ionic 4的http URL请求中使用angular传递变量?

来自分类Dev

ionic 4侧面菜单不会更新其内容

来自分类Dev

如何在Ionic 4的侧面菜单中管理会话?

来自分类Dev

SocialSharing Ionic4 Angular 8

来自分类Dev

Angular2 / Ionic2:在侦听器中执行$ http.get

来自分类Dev

如何添加带有ionic / ionic 2 / ionic 3 / ionic 4 / ionic 5的本地cordova插件?

来自分类Dev

如何通过 Angular4 HTTP Get 从 JSON 文件访问单个元素?

来自分类Dev

带有ionic 3的HTTP Post

来自分类Dev

Ionic 3,HTTP 原生 vs. HttpClient

Related 相关文章

  1. 1

    无法在 html 中以 angular 4 ionic 3 显示数组对象

  2. 2

    模拟$ http Angular Ionic

  3. 3

    Ionic 4,Angular 8和HTTP拦截器

  4. 4

    Http.get()工作正常,但在Ionic 4中无法在build(Release / Debug)中工作

  5. 5

    Angular&Ionic,HTTP Get无法在真实设备IOS中工作

  6. 6

    将 json 对象与 Ionic 3 Angular 4 中的下拉列表集成

  7. 7

    IONIC 4 - 离子菜单不与页面重叠

  8. 8

    在 ts 文件(Angular 4 & ionic 3)中渲染时,onclick 函数不起作用

  9. 9

    Angular/Ionic 链式 HTTP 调用不同步

  10. 10

    我的侧边菜单使用Angular在Ionic4下覆盖了我主页的html内容

  11. 11

    Ionic 2 / Angular - 操作 JSON

  12. 12

    Ionic 3 Angular 4:Visual Studio Code 还是 WebStorm?

  13. 13

    Ionic 3 侧边菜单标题中心

  14. 14

    ionic4 @ ionic / angular ionChange或ion-select在表单重置时无法正常工作

  15. 15

    无法在ionic2中打开菜单

  16. 16

    无法在ionic2中打开菜单

  17. 17

    Ionic Firebase Angular 异步验证

  18. 18

    在http get ionic中获得空响应

  19. 19

    限制 IONIC 侧边菜单自动填充大屏幕

  20. 20

    Angular 7 Cli 不在 Ionic 4 项目中应用 angular.json 原理图选项

  21. 21

    如何在Ionic 4的http URL请求中使用angular传递变量?

  22. 22

    ionic 4侧面菜单不会更新其内容

  23. 23

    如何在Ionic 4的侧面菜单中管理会话?

  24. 24

    SocialSharing Ionic4 Angular 8

  25. 25

    Angular2 / Ionic2:在侦听器中执行$ http.get

  26. 26

    如何添加带有ionic / ionic 2 / ionic 3 / ionic 4 / ionic 5的本地cordova插件?

  27. 27

    如何通过 Angular4 HTTP Get 从 JSON 文件访问单个元素?

  28. 28

    带有ionic 3的HTTP Post

  29. 29

    Ionic 3,HTTP 原生 vs. HttpClient

热门标签

归档