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

Question

我有一个包含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

你应该尝试ionic modal。

步

1. 创建模态页面并将其添加到模块文件中。
2. 在编辑时，单击打开模型并传递要编辑的参数值。
3. 将参数分配给模态页面输入。
4. 更新数据库中的值