本文介绍了如何切换离子按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在创建一个离子项目,需要能够单击一个按钮以显示项目,再次单击同一按钮应关闭列表.我很累使用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>
这篇关于如何切换离子按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!