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