添加，编辑或删除页面中的功能

Question

i有一个订阅页面由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>&nbsp;</p>
                    <p class="cost">₹0</p>
                    <p>&nbsp;</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>&nbsp;</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>&nbsp;</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>

Answer 1

您应该尝试离子模态。

步骤

1. 创建模式页面并将其添加到模块文件中。

2. 在编辑中单击"打开模型"并传递要编辑的参数值。

3. 将参数分配到模态页面输入。

4. 数据库中的更新值