在 Ionic 中动态导航自定义选项卡

Question

我试图创建自定义选项卡，每个选项卡都有自己的部分。选项卡和部分动态来自服务器。 这是链接 Tabs with html，我需要与 ionic 2 相同的功能，并且想要 在 DOM 中激活元素，但我不能使用 *ngIf 指令。

这是我现在拥有的：

1.这是Json数据

this.filterData=[
  {"key":"Budget","value":["10-100000"],"type":"bar","labelid":"17"},
  {"key":"Parking Capacity","value":["0-100","101-250",">251"],"type":"checkbox","labelid":"12"},
  {"key":"Venue","value":["Indoor","Outdoor","Indoor\/Outdoor"],"type":"checkbox","labelid":"3"},
  {"key":"No.of Rooms","value":["0-10","11-30",">31 "],"type":"checkbox","labelid":"15"},
  {"key":"Max.Capacity","value":["0-100"],"type":"bar","labelid":"1"},
  {"key":"Function Type","value":["Marriage","Engagement","Anniversary","Birthday","Cocktail","Corporate","Party"],"type":"checkbox","labelid":"11"}];

2.左侧部分：我已经创建了标签

右侧部分：我为每个标签创建了 div

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col col-4 class="one">
        <ion-row *ngFor="let type of filterData">{{type.key}}</ion-row>
      </ion-col>

      <ion-col col-8 > 
          <ion-item *ngFor="let function of filterData">
            <div>{{function.labelid}}</div>
          </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>

它看起来像这样

我想在这些标签之间切换并显示相应的 div 部分。

请帮助我实现这一目标。

Answer 1

根据您的需求，您可以使用Segment来构建导航按钮组。

为了显示相应的 div 部分，只需使用 ngSwitch 来控制根据选定的段值显示它们。

---

由于要保留切换后的元素，ngSwitch 会像ngIf 一样移除隐藏元素，你可以使用hidden 来控制显示相应的div 部分。 （演示更新）

参考示例demo。