如何切换离子按钮 [英] How to toggle an ion-button

问题描述

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

I am creating an ionic project and need to be able to click on a button to display the items, clicking on the same button again should close the list. I tired using ShowDisplay() but nothing loads if I add it in a *ngif. Is there a way to modifiy my DisplayF1() so that it incorporates the isVisible and !isVisible? I'm open to any other suggestions.

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); });
  }    }

推荐答案

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

You can do it in html file without calling a function in your .ts file. :

.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>

这篇关于如何切换离子按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！