* ngFor条件显示类别下的子类别

时间:2017-05-02 13:40:02

标签: angular

我正在尝试在角度2 APP中使用JSON响应的类别下显示子类别。我使用ngIf作为过滤器子类别。 ifparent_id not null其子类别以JSON字符串

表示

这是MY JSON STRING

[
  {
    "id": "15",
    "parent_id": null,
    "category": "Dress"
  },
  {
    "id": "17",
    "parent_id": "15",
    "category": "Dress"
  },


  {
    "id": "19",
    "parent_id": null,
    "category": "Men"
  },
  {
    "id": "30",
    "parent_id": "19",
    "category": "none"
  },
  {
    "id": "31",
    "parent_id": "19",
    "category": "Shorts"
  }
]

TEMPLATE

<ul class="navbar-nav">
        <span *ngFor="let category of categories">
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
      {{category.category}}
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <span *ngFor="let subcategory of categories" *ngIf="subcategory.parent_id==category.id">
      <a class="dropdown-item" href="#">
       {{subcategory.category}}     
        </a>
         </span>
      </div>
      </li>
        </span>
      </ul>

任何帮助都非常感谢...

1 个答案:

答案 0 :(得分:1)

    <ul class="menu_inline">
        <li class="menu">
            <div *ngFor="let category of category_list">
            <a>{{ category.name }}</a>
            <ul>
                <li><div *ngFor="let subcategory of subcategory_list" (click)="onSelects(subcategory)">
                <ng-container *ngIf="subcategory.category==category.id">
                <a>{{subcategory.name}}</a>
                </ng-container></div>
                </li>
            </ul>
            </div>
        </li>
    </ul>