如何解决如何切换离子按钮
我正在创建一个离子项目,需要能够点击一个按钮来显示项目,再次点击同一个按钮应该关闭列表。我厌倦了使用 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); });
} }
解决方法
无需太多代码更改,您就可以使用 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 布尔值。
您可以在 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。