如何切换离子按钮

Question

我正在创建一个离子项目，需要能够单击一个按钮来显示项目，再次单击同一个按钮应该关闭列表。我厌倦了使用 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); });
  }    }

Answer 1

无需太多代码更改，您就可以将ion-item 包装在带有*ngIf 的跨度中。它看起来像

<ion-button (click)="displayF1()" >Summary...schools</ion-button>    
<span *ngIf="isVisible">
<ion-item class="display" *ngFor="let item of data1">
  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>
</span>

只需确保调用 displayF1 函数即可切换 isVisible 布尔值。

Answer 2

您可以在 html 文件中执行此操作，而无需在 .ts 文件中调用函数。 ：

.ts

isVisible: boolean = false; // initialize it as false

.html

<div>
    <ion-button (click)="isVisible != isVisible; displayF1()">Summary of cases in schools</ion-button>

  <span *ngIf="isVisible">
    <ion-item class="display" *ngFor="let item of data1">
      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> 
  </span>

</div>