如何通过单击按钮显示来自本地 JSON 文件的数据？

Question

这是一个多级手风琴列表，在第三级，我在每个项目旁边放置了按钮（锤子图标）。我在按钮中添加了一个 toastController，但是如何在要修复的问题中显示我单击的每个项目（在菜单的底部）。

form.html ...

            <button ion-item (click)="toggleSection(i)" detail-none [ngClass]="{'section-active': item.open, 'section': !item.open}">
              <ion-icon item-left name="ios-arrow-forward" *ngIf="!item.open"></ion-icon>
              <ion-icon item-left name="ios-arrow-up" *ngIf="item.open"></ion-icon>
              {{ item.name }}
            </button>

              <ion-list *ngIf="item.children && item.open" no-lines style="margin-bottom: 0%">
                <!-- Second Level -->
                <ion-list-header *ngFor="let child of item.children; let j = index" no-padding style="margin-bottom: 0%">
                  <!-- Toggle Button -->
                    <button ion-item (click)="toggleItem(i, j)" detail-none class="child-item" *ngIf="child.children" no-padding no-lines>
                      <ion-icon item-left name="add" *ngIf="!child.open"></ion-icon>
                      <ion-icon item-left name="close" *ngIf="child.open"></ion-icon>
                      {{ child.name }}
                    </button>

              <!-- Direct Add Button -->
              <!-- <ion-item *ngIf="!child.children" detail-none class="child-item" text-wrap no-lines>
                <h2>{{ child.name }}</h2>
                <p text-lowercase>{{ child.information }}</p>
                <button ion-button outline item-end (click)="buyItem(child)">{{ child.price }}</button>
              </ion-item> -->

              <ion-list *ngIf="child.children && child.open">
                <!-- Third-Level -->
                <ion-item *ngFor="let item of child.children" detail-none class="child-item" text-wrap no-lines>
                  <ion-label>{{ item.name }}</ion-label>
                  <!-- <button ion-button  item-end (click)="buyItem(child)"><ion-icon ios="ios-hammer"></ion-icon></button> -->
                  <button ion-button color="dark" item-end (click)="tofix(item)">
                      <ion-icon ios="ios-hammer" is-active="false"></ion-icon>
                    </button>
                </ion-item>
              </ion-list>

            </ion-list-header>
          </ion-list>

        </ion-list-header>
    </ion-list>
  </ion-card>

    <div class="issue">
      <ion-card>
        <ion-card-header>
          Problems to be fix
        </ion-card-header>
            <p style="font-size: 1.3em; padding-left: 15px; color: black" >Main: </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>
    </div>
....

form.ts

import { Component, Input, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@IonicPage()
@Component({
  selector: 'page-form',
  templateUrl: 'form.html',
})
export class FormPage  implements OnInit{
  data: any[];

  @Input('item') item: any;

  constructor(public navCtrl: NavController, 
              public navParams: NavParams, 
              private http: Http,
              private toastCtrl: ToastController) {
                let localData = this.http.get('assets/data/menus.json').map(res => res.json().items);
                  localData.subscribe(data => {
                    this.data = data;
    });
  }

  toggleSection(i) {
    this.data[i].open = !this.data[i].open;
  }

  toggleItem(i, j) {
    this.data[i].children[j].open = !this.data[i].children[j].open;
  }

    ngOnInit() {
    }

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

  ionViewDidLoad() {
    console.log('ionViewDidLoad FormPage');
  }

}

menu.json

{
  "items": [
    {
      "name": "MAIN",
      "children": [
        {
          "name": "Main Door",
          "children": [
            {
              "name": "Painted door lock"
            },
            {
              "name": "Painted door"
            },
            {
              "name": "Damaged door"
            },
            {
              "name": "Damaged door lock"
            },
            {
              "name": "Painted hinge"
            },
            {
              "name": "Stuck door"
            },
            {
              "name": "With gap below"
            },
            {
              "name": "Paint with cracks"
            },
            {
              "name": "Unfinished door paint"
            },
            {
              "name": "Gaps beside door knob"
            },
            {
              "name": "Door with voids"
            }
          ]
        },
      ]
    }
.... I just put the MAIN data in my json as the image only shows ....
  ]
}

Answer 1

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

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

<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功能，防止用户选择两次。