Question

我正在尝试创建自定义标签，每个标签都有自己的部分。选项卡和部分是动态来自服务器的。这是链接Tabs with html，我需要与离子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相同的隐藏元素，您可以使用隐藏来控制显示相应的div部分。（演示更新）

参考示例 demo 。

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

1 个答案: