且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何通过单击按钮显示本地JSON文件中的数据?

更新时间:2023-01-16 10:24:37

您可以添加一个全局变量来保存所选项目并将其显示在模板中.

You can add a global var to hold your selected item and display it in your template.

form.ts

public selectedTask: string = '';

...

async tofix(item){
    const toast = await this.toastCtrl.create({
        message: `Added item to be fix : ${item.name}`,
        duration: 2000
    });

    this.selectedTask += `${item.name} `;
    this.removeItemByName(item.name);
    toast.present();
}

private removeItemByName(name) {
    for (let i in this.data) {
        if (this.data[i].name === name) arr.splice(i, 1);
    }
}

form.html

form.html

<ion-card>
    <ion-card-header>
        Problems to be fix
    </ion-card-header>

    <p style="font-size: 1.3em; padding-left: 15px; color: black" >Main: {{selectedTask }} </p>
    <p style="font-size: 1.3em; padding-left: 15px; color: black" >Kitchen: </p>
    <p style="font-size: 1.3em; padding-left: 15px; color: black" >Terrace: </p>
    <p style="font-size: 1.3em; padding-left: 15px; color: black" >Toilet: </p>
    <button ion-button full (click)="AreaPage()">Submmit</button>
</ion-card>

编辑

添加了removeItemByName功能,以防止用户两次选择项目.

Added removeItemByName function to prevent the user to select item twice.