bugfix> json > 投稿

私は投稿する予定の完全に機能するメニュー(静的)を持っています.jsonファイルから取得したものに基づいて複製したい、つまりjsonファイルに基づいてメニューを作成します。

メニューとして欲しいものはここにあります: html:

<div class="menu-container" >
    <div class="menu">
        <nav  class="navbar-toggleable-md">
            <div id="toggle" class="navbar-toggler"><a></a>
            </div>
        </nav>
        <ul id="my_styles" class="rowcenter" >
            <li>
                <a role="button" class="button button4 menu-button" ><i role="button" class="icon-ambientais fs1 icon menu-button"></i><span class="button-text rowcenter menu-button">menu1</span></a>
                <ul class="menu-list">
                    <li>
                        <a href="#" style="color: #f38e31"><i style="color: white" class="icon-ambientais fs1"></i>submenu</a>
                        <ul>
                            <li><a href="javascript:void(0)" [routerLink]="['/doc/link']" [routerLinkActive]="['router-link-active']">{{ 'submenu</a></li>
                            <li><a href="javascript:void(0)" [routerLink]="['/doc/link2']" [routerLinkActive]="['router-link-active']">submenu</a></li>
                            <li><a href="javascript:void(0)" [routerLink]="['/documentos/AbreviaturaQld']" [routerLinkActive]="['router-link-active']">{{ 'Imagens' | translate }}</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" style="color: #f38e31"><i style="color: white" class="icon-gestao-ambient fs1"></i>submenu3</a>
                        <ul>
                            <li><a href="javascript:void(0)" [routerLink]="['/doc2/link2']" [routerLinkActive]="['router-link-active']">submenu2</a></li>
                            <li><a href="javascript:void(0)" [routerLink]="['/doc2/link2']" [routerLinkActive]="['router-link-active']">submenu2</a></li>
                            <li><a href="javascript:void(0)" [routerLink]="['/doc2/link2']" [routerLinkActive]="['router-link-active']">submenu2</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

私はそれを動作させるためにjavascriptを持っています。 私はそれを理解できないので、私はいくつかの助けを探していました。

私はその例を見つけましたが、私が必要なもののように見せることはできません。 https://www.codeproject.com/Articles/311758/Building-Menu-from-JSON (json objをjsonファイルに渡す)

しかし、私が持っているメニューのようにそれを動作させることはできません。例えば、 <ul> to <ul class="bla"> を変更した場合これで壊れます。 それから私はそれを見つけました:JSONからメニューを作成する しかし、成功しません。

ここに私の試みのコードがあります: htmlで私はただ電話する

私のタイプスクリプトファイル: .ts

ngOnInit() {
this._menu.getMenu()
          .subscribe( res => {
               let data = res;
               console.log(data);
              var getMenuItem = function (itemData) {
                  var item = $("<li>")
                      .append(
                          $("<a>", {
                              href: itemData.link,
                              html: itemData.name
                          }));
                  if (itemData.sub) {
                      var subList = $("<ul>");
                      $.each(itemData.sub, function () {
                          subList.append(getMenuItem(this));
                      });
                      item.append(subList);
                  }
                  return item;
              };
              var $menu = $("#menu");
              $.each(data.menu, function () {
                  $menu.append(
                      getMenuItem(this)
                  );
              });
              $menu.menu();
          });
}

以前に誰かがこのようなことをしたことがありますか?

imgがなくても、1つのメニュー項目とサブメニューで動作する例をお持ちの方がいれば幸いです。

ありがとうございました。

回答 1 件
  • OK cssとhtmlをすべて完了したら、そのように配列するJSONファイルを取得しました。

    this._menu.getMenu()
              .subscribe( res => {
                  let data = res;
                  console.log(data);
                  this.arr = data;
                  this.arr = (<any>Object).values(data);
              });
    
    

    次に、htmlでメニューとサブメニューの名前/リンク/アイコンを選択し、すでに作成されたタグにngforします:

    <li *ngFor="let item of arr[0]; let i = index;">
                    <a role="button" class="button button4 menu-button" ><i role="button" class={{item.class}}></i><span class="button-text rowcenter menu-button">{{item.name}}</span></a>
                    <ul class="menu-list" *ngIf=item.sub>
                        <li *ngFor="let sub of item.sub; let j = index;">
                            <a href="#" style="color: #f38e31"><i style="color: white" class={{item.sub[j].class}}></i>{{item.sub[j].name}}</a>
                            <ul *ngFor="let smn of sub.submenu; let x = index;">
                                <li><a href="javascript:void(0)" [routerLink]="[smn.routerlink]"  [routerLinkActive]="['router-link-active']">{{smn.name}}</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
    
    

    ここに私が使用したJSONがあります:

    {
        "menu": [
            {
                "name": "Menu Name",
                "link": "link",
          "class": "icon-ambientais fs1 icon menu-button",
          "sub": [{
              "name": "SubMenuTitle1",
              "link": "link",
              "class": "icon-ambientais fs1",
              "submenu":[{
                "name": "SubMenu1",
                "routerlink": "/link/Qld"
              },{
                "name": "SubMenu2",
                "routerlink": "/link/eQld"
              },{
                "name": "SubMenu3",
                "routerlink": "/link/aQld"
              }
            ]
            },
            {
              "name": "SubMenuTitle2",
              "link": "link",
              "class": "icon-gestao-ambient fs1",
              "submenu":[{
                "name": "SubMenu1",
                "routerlink": "/link2/oQld"
              },{
                "name": "SubMenu2",
                "routerlink": "/doc/eQld"
              }
            ]
            }
          ]
        }
    }
    
    

    未来の誰かを助けることを願っています

あなたの答え