我有一个包含3张卡的订阅页面,在选择每张卡时,启用了一个按钮。此按钮用于编辑或向页面添加项目。当我点击一张卡片时,按钮被启用。所以当我点击编辑按钮时,我需要弹出一个警告框来编辑该卡中的内容。请帮忙..谢谢
HTML代码
import { Component } from '@angular/core';
import { NavController, NavParams, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { JobsearchPage } from '../jobsearch/jobsearch';
import { ConnectpayPage } from '../connectpay/connectpay';
@Component({
selector: 'page-jobsub',
templateUrl: 'jobsub.html',
providers: [ObsAuthService]
})
export class JobsubPage {
public category: string = "CLASSIC";
public subscription: string = "PREMIUM";
public option: string ="";
// public cardClicked: boolean = false;
isenabled:boolean=false;
editItem: any;
// public price: string ="";
// public p1: string = "₹100";
// public p2: string = "₹200";
constructor(private nav: NavController, private auth: ObsAuthService,
private alertCtrl: AlertController, private loadingCtrl: LoadingController,
public navParams: NavParams) { }
selectChange(e) {
console.log(e);
}
//redirect to job search page
public free_pay(){
this.nav.push(JobsearchPage);
}
//proceed to payment page
public classic_pay(){
this.nav.push(ConnectpayPage, {option: this.category});
}
//proceed to payment page
public premium_pay(){
this.nav.push(ConnectpayPage, {option: this.subscription});
}
//to enable the edit button
public onCardClick(){
// this.cardClicked = !this.cardClicked;
this.isenabled=true;
this.editItem()
}
// public add_page(){
// }
}
page-jobsub{
.sentnc{
color: grey;
padding: 40px 10px;
text-align: center;
}
.card-md {
// width: calc(25% - 20px);
font-size: 1.4rem;
text-align: center;
// background: rgb(192, 179, 167);
}
.cost{
font-weight: bolder;
}
.titles{
color: crimson;
font-weight: bolder;
}
.add_buttn{
// width: 15%;
// background-color: red;
padding: 10px 15px;
// text-decoration-color: white;
width: 10%;
}
}
<ion-header>
<ion-navbar>
<ion-title>SUBSCRIPTION</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-item>
<ion-buttons end>
<button ion-button [disabled]="!isenabled" class="add_buttn" (click)="add_page()">Add/Edit</button>
</ion-buttons>
</ion-item>
<ion-label class="sentnc">Take your desired plan to get access to our content easily</ion-label>
<ion-row>
<ion-col col2>
<ion-card (click)="onCardClick()">
<!-- <div *ngIf="cardClicked"></div> -->
<ion-card-content>
<ion-card-title class="titles">
FREE
</ion-card-title>
<p>1 MONTH FREE</p>
<p> </p>
<p class="cost">₹0</p>
<p> </p>
<p>
<button (click)="free_pay()" ion-button color="dark" round>Choose plan</button>
</p>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col col2>
<ion-card (click)="onCardClick()">
<ion-card-content>
<ion-card-title class="titles">
CLASSIC
</ion-card-title>
<p>6 MONTHS PLAN</p>
<p><del>₹150</del></p>
<p class="cost">₹100<sub>/month</sub></p>
<p> </p>
<p>
<button (click)="classic_pay()" ion-button color="dark" round>Choose plan</button>
</p>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card (click)="onCardClick()">
<ion-card-content>
<ion-card-title class="titles">
PREMIUM
</ion-card-title>
<p>1 YEAR PLAN</p>
<p><del>₹250</del></p>
<p class="cost">₹200<sub>/month</sub></p>
<p> </p>
<p>
<button (click)="premium_pay()" ion-button color="dark" round>Choose plan</button>
</p>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-content>