下拉列表中带有 *ngFor 的离子项

Question

我想设置一个按钮，在下拉菜单中打开和隐藏一些ion-item。

我知道文档中可能有解决方案，但我找不到它

<ion-header>
  <ion-toolbar>
    <ion-title>Technical Information</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header>
      <ion-label>Manuales</ion-label>
    </ion-list-header>
    <ion-item *ngFor="let m of manuals">
      <ion-label>{{m}}</ion-label>
    </ion-item>
  </ion-list>
  <!-- Other <ion-list-header>s and <ion-item>s -->
</ion-content>

我想在单击每个 ion-list-header 时隐藏和显示所有项目，显示他自己的 ion-item 和 *ngFor，就像有 20 个手册一样，下拉所有 20 个手册并隐藏其他 ion-list-header s...

有没有办法用这种结构或用另一种结构来做到这一点？

Answer 1

试试这个：

<ion-header>
    <ion-toolbar>
        <ion-title>Technical Information</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-list *ngFor="let m of manuals; let i=index">
        <ion-list-header>
            <ion-label (click)="showOrHide(i)">Manuales</ion-label>
        </ion-list-header>
        <ion-list id="{{i}}" style="display:none">
            <ion-item *ngFor="let m of m.list">
                <ion-label>{{m}}</ion-label>
            </ion-item>
        </ion-list>
    </ion-list>
</ion-content>

在.ts 组件中：

import { Component } from '@angular/core';
import { NavController , AlertController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})


export class HomePage {
  manuals = [{
    id:1,
    list: ["1","2","3"]
  },
  {
    id:2,
    list: ["1","2","3"]
  },
  {
    id:3,
    list: ["1","2","3"]
  },
  {
    id:4,
    list: ["1","2","3"]
  }]

  constructor() {

  }

  showOrHide(id){
    const listItemShow = document.getElementById(id);
    if(listItemShow.style.display === "none")
      listItemShow.style.display = "block"
    else
      listItemShow.style.display = "none"
  }
}