如何在离子的不同段按钮点击上显示不同类型的元素？

Question

我从 ionic 框架文档中引用了这个示例，并创建了自己的一个片段。

<div padding>
  <ion-segment [(ngModel)]="pet">
    <ion-segment-button value="kittens">
      Kittens
    </ion-segment-button>
    <ion-segment-button value="puppies">
      Puppies
    </ion-segment-button>
  </ion-segment>
</div>

<div [ngSwitch]="pet">
  <ion-list *ngSwitchCase="'puppies'">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="img/thumbnail-puppy-1.jpg">
      </ion-thumbnail>
      <h2>Ruby</h2>
    </ion-item>
    ...
  </ion-list>

  <ion-list *ngSwitchCase="'kittens'">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="img/thumbnail-kitten-1.jpg">
      </ion-thumbnail>
      <h2>Luna</h2>
    </ion-item>
    ...
  </ion-list>
</div>

在这里，他们在不同的按钮点击时显示不同的离子列表。 但我是一种不同的元素类型，将显示在两个不同的按钮单击上。 这是我的代码-

<div>
    <ion-segment [(ngModel)]="pet">
        <ion-segment-button value="audios">
            Audios
        </ion-segment-button>
        <ion-segment-button value="images">
            Images
        </ion-segment-button>
    </ion-segment>
</div>

<div [ngSwitch]="pet">

    //this is coming
    <ion-list *ngSwitchCase="'audios'">
        <p align="left">
            Resources
        </p>
        <ion-item-divider>
            Category Name
        </ion-item-divider>
        <ion-item class="custom-font-size">
        <i class="material-icons rotate theme-color" item-start> format_align_center</i> 
          Lemon Exercise<span item-end>08:12</span>

        </ion-item>

        <ion-item class="custom-font-size">
            <ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
            Sample Goal Audio<span item-end>04:11</span>

        </ion-item>

        <ion-item class="custom-font-size">
            <ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
            Mindfulness<span item-end> 07:12</span>

        </ion-item>

        <ion-item-divider>
            Category Name
        </ion-item-divider>
        <ion-item class="custom-font-size">
            <ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
            Audio File Name<span item-end>11:00</span>

        </ion-item>
        <ion-item class="custom-font-size">
            <ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
            Sample Goal Audio<span item-end>10:12</span>

        </ion-item>

        <ion-item class="custom-font-size">
            <ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
            Mindfulness<span item-end>10:12</span>

        </ion-item>

    </ion-list>

    //this is not coming
    <ion-grid *ngSwitchCase="'images'">
        <div *ngFor="let images of image; let i = index;">
            <ion-row *ngIf="i % 3 === 0">
                <ion-col col-4 *ngIf="i < images.length">
                    <img [src]="images[i].url" />
                </ion-col>
                <ion-col col-4 *ngIf="i+1 < images.length">
                    <img [src]="images[i+1].url" />
                </ion-col>
                <ion-col col-4 *ngIf="i+2 < images.length">
                    <img [src]="images[i+2].url" />
                </ion-col>
            </ion-row>
        </div>
    </ion-grid>

</div>

在 .ts 文件中，我将图像存储为

this.image = [
      { url: 'assets/imgs/placeholder.png'},
      { url: 'assets/imgs/placeholder.png' }, 
      { url: 'assets/imgs/placeholder.png' }
    ];

如您所见，我想在单击第一段按钮时显示离子列表，并在单击第二段按钮时显示图像网格。到目前为止，当我点击第二个按钮时，什么都没有出现

Answer 1

我认为你的 for 循环是不正确的，你正在使用循环，并且在其中，你试图在每个不是数组的项目上使用索引。下面的代码应该可以工作

<div>
    <ion-segment [(ngModel)]="pet">
      <ion-segment-button value="audios">
        Audios
      </ion-segment-button>
      <ion-segment-button value="images">
        Images
      </ion-segment-button>
    </ion-segment>
  </div>

  <div [ngSwitch]="pet">
    <ion-list *ngSwitchCase="'audios'">
      <p align="left">
        Resources
      </p>
      <ion-item-divider>
        Category Name
      </ion-item-divider>
      <ion-item class="custom-font-size">
        <i class="material-icons rotate theme-color" item-start> format_align_center</i>
        Lemon Exercise<span item-end>08:12</span>

      </ion-item>

      <ion-item class="custom-font-size">
        <ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
        Sample Goal Audio<span item-end>04:11</span>

      </ion-item>

      <ion-item class="custom-font-size">
        <ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
        Mindfulness<span item-end> 07:12</span>

      </ion-item>

      <ion-item-divider>
        Category Name
      </ion-item-divider>
      <ion-item class="custom-font-size">
        <ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
        Audio File Name<span item-end>11:00</span>

      </ion-item>
      <ion-item class="custom-font-size">
        <ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
        Sample Goal Audio<span item-end>10:12</span>

      </ion-item>

      <ion-item class="custom-font-size">
        <ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
        Mindfulness<span item-end>10:12</span>

      </ion-item>

    </ion-list>

    <ion-grid *ngSwitchCase="'images'">
      <div *ngFor="let image of images; let i = index;">
        <ion-row>
          <ion-col col-4>
            <img [src]="image.url" />
          </ion-col>
          <ion-col col-4>
            <img [src]="image.url" />
          </ion-col>
          <ion-col col-4>
            <img [src]="image.url" />
          </ion-col>
        </ion-row>
      </div>
    </ion-grid>
  </div>