时间戳

首页 > 解决方案 > 如何在 IonicFramework 中选择特定的数组对象？

ionic-framework - 如何在 IonicFramework 中选择特定的数组对象？

问题描述

输出样本：输出

在furtherModules功能中，在主模块Environmental Compliance Management下有两个子模块是Chemical Management和PPE Management，所以当用户点击Chemical Management时它应该进入一个新页面，当用户点击PPE Management时它应该进入另一个页面。我不知道该怎么做。我真的需要这方面的帮助。

home.html code:

<ion-content class="outer-content">
  <ion-card>
    <ion-card-header>
      {{content}}
    </ion-card-header>
    <ion-card-content>
      <ion-segment [(ngModel)]="content" color="dark">
        <ion-segment-button value="Environment Compliace Management">
          <ion-icon name="flask"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="Health & Safety Management">
          <ion-icon name="medkit"></ion-icon>
        </ion-segment-button>
      </ion-segment>
      <ion-list style="margin: 0" inset>
        <button ion-item *ngFor="let sContent of getContentItems(content)" (click)="furtherModules()">
          <ion-icon item-start [name]="sContent.icon" color= "primary"></ion-icon>
          {{sContent.name}}
        </button>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

home.ts code:


import {Component} from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import {ModuleListPage} from '../module-list/module-list';
import { identifierName } from '@angular/compiler';

@Component({
  templateUrl: 'home.html'
})
export class HomePage{
  content="MODULES";
  constructor(public navCtrl: NavController, public navParams: NavParams) {}


  items: any = {
    'Environmental Compliance Management': [
      {
        name: 'Chemical Management',
        icon: 'nuclear',
      },

      {
        name: 'PPE Management',
        icon: 'man'
      }
    ],
    'Health & Safety Management': [
      {
        name: 'Emergency Incident Management',
        icon: 'alert'
      },
      {
        name: 'Machinery Management',
        icon: 'construct'
      },
      {
        name: 'Risk Management',
        icon: 'cog'
      }
    ]
  };
  getContentItems(type:any){
    return this.items[type];
  }
  furtherModules(){
  }
}

标签： ionic-framework

解决方案

首先需要确定我们指向哪个页面，例如，在我的情况下，我生成一个虚拟页面，它是“MyAwesomePage”和“MyAnotherAwesomePage”，然后在 .ts 文件中需要做这样的事情

{
  name: 'Chemical Management',
  icon: 'nuclear',
  goTo: 'MyAwesomePage'
},

{
  name: 'PPE Management',
  icon: 'man',
  goTo: 'MyAnotherAwesomePage'
}


public furtherModules(sContent:any): void{
 // Validate here if sContent.goTo is a valid page
 this.navCtrl.push(sContent.goTo, {_sContent: sContent});
}

之后，在 .html 文件中需要做这样的事情

<ion-list style="margin: 0" inset>
    <button ion-item *ngFor="let sContent of getContentItems(content)" (click)="furtherModules(sContent)">
       <ion-icon item-start [name]="sContent.icon" color= "primary"></ion-icon>
          {{sContent.name}}
    </button>
</ion-list>

推荐阅读