如何通过单击按钮来切换离子项目答案

【问题标题】：How to toggle an ion-item with a button click如何通过单击按钮来切换离子项目
【发布时间】：2021-03-24 17:27:56
【问题描述】：

我正在创建一个离子项目，需要能够单击一个按钮来显示项目，再次单击同一个按钮应该关闭列表。我厌倦了使用 ShowDisplay()，但如果我将它添加到 *ngif 中，则不会加载任何内容。有没有办法修改我的 DisplayF1() 使其包含 isVisible 和 !isVisible？我愿意接受任何其他建议。

html文件

<div>
<ion-button (click)="displayF1()" >Summary of cases in schools</ion-button>
<ion-item class="display" *ngFor="let item of data1">
  <ion-card>
    <ion-card-content>
      <ion-item class="display">
        Reported Date: {{item.reported_date}}<br>
        Schools with Cases: {{item.current_schools_w_cases}} <br>
        Schools Closed: {{item.current_schools_closed}}<br>
        Current Number of Schools: {{item.current_total_number_schools}}<br>
        School Related Cases: {{item.cumulative_school_related_cases}}<br>
        School Related Student Cases: {{item.cumulative_school_related_student_cases}}<br>
        School Related Staff Cases: {{item.cumulative_school_related_staff_cases}}<br>
        School Related Unspecified Cases: {{item.cumulative_school_related_unspecified_cases}}
      </ion-item>  
  </ion-card-content>
</ion-card>
</ion-item>

组件文件

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpErrorResponse} from '@angular/common/http';
import { NodeService} from '../node.service';

@Component({
  selector: 'app-folder',
  templateUrl: './folder.page.html',
  styleUrls: ['./folder.page.scss'],
})
export class FolderPage implements OnInit {
  public folder: string;

  isVisible: boolean = false;
  data1: any = [];
  data2: any = [];
  data3: any = [];


  constructor(private activatedRoute: ActivatedRoute, private node: NodeService) { }


  public showDisplay() {

    if (this.isVisible === false) {
      this.isVisible = true;
      // show 
    } else {
      this.isVisible = false;
      // hide 
    }
  }

  displayF1() {
    this.node.f1().subscribe
    (data => { this.data1 = data; },
    (err: HttpErrorResponse) => { console.log(err.message); });
  }    }

【问题讨论】：

为什么？ How to toggle an ion-button
我更改了我的原始代码，我更新了原始帖子，但我认为有一个新帖子可能会更好

标签： angular ionic-framework ionic4 show-hide

【解决方案1】：

html file

<div>
    <ion-button (click)="showDisplay()">Summary of cases in schools</ion-button>
    <ng-container *ngIf="isVisible === true">
      <ion-item class="display" *ngFor="let item of data1">
        <ion-card>
          <ion-card-content>
            <ion-item class="display">
              Reported Date: {{item.reported_date}}<br>
              Schools with Cases: {{item.current_schools_w_cases}} <br>
              Schools Closed: {{item.current_schools_closed}}<br>
              Current Number of Schools: {{item.current_total_number_schools}}<br>
              School Related Cases: {{item.cumulative_school_related_cases}}<br>
              School Related Student Cases: {{item.cumulative_school_related_student_cases}}<br>
              School Related Staff Cases: {{item.cumulative_school_related_staff_cases}}<br>
              School Related Unspecified Cases: {{item.cumulative_school_related_unspecified_cases}}
            </ion-item>
          </ion-card-content>
        </ion-card>
      </ion-item>
    </ng-container>
  </div>

ts file

public isVisible: boolean = false;
  data1: any = [];
  public showDisplay() {
    this.isVisible = !this.isVisible;
  }

【讨论】：