Как выбрать конкретный объект массива в IonicFramework?

Question

выходной образец: выходной

В функции дальнейших модулей под основным модулем Управления соответствием окружающей среде есть два подмодуля: Управление химическими веществами и Управление СИЗ, поэтому, когда пользователь нажимает ХимическийУправление должно перейти на новую страницу, и когда пользователь нажимает Управление PPE, оно должно перейти на другую страницу. Я не знаю, как это сделать.Мне действительно нужна помощь в этом.

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(){
  }
}

Answer 1

Сначала нужно определить, на какую страницу мы направляемся. Например, в моем случае я генерирую фиктивную страницу с именами «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>

Answer 2

Хорошо, я просто понимаю, чего вы хотите достичь

1. Вы должны создать страницу как для Environment Compliace Management , так и Health & Safety Management , используя cli ниже

ionic g page Environment Compliace Management ionic g page Health & Safety Management

см. Эту ссылку для получения более подробной информации, лучше сначала прочитать документацию.

2. Добавьте свою страницу к app.module.ts, обратитесь к этому учебнику Мне не нужно объяснять это

3. третий сделать что-то вроде ниже

В вашем html-файле добавьте некоторые входные параметры для функции ваших дальнейших модулей

(click)="furtherModules(content)

В вашем файле ts сделайте что-то вроде ниже

furtherModules(type:any){
       if('Environment Compliace Management'){
          this.navCtrl.push(*name of your page to environment compliace management*)
       }
       else{
          this.navCtrl.push(*name of your page to Health & Safety Management*)
       }
    }