JavaScript-Ionic 2-navPush由于某些原因无法正常工作

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript-Ionic 2-navPush由于某些原因无法正常工作，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6489字，纯文字阅读大概需要10分钟。

内容图文

navPush停止工作了,我真的不知道为什么. navPop不能与this.nav.push()一起使用.我尝试了更多的按钮,navbuttons,我真的不明白为什么不起作用.

html文件

<ion-header>
  <ion-toolbar color="danger">
    <ion-title>
      {{ nombreLista }}
    </ion-title>
    <ion-buttons end
                 [navPush]="home"
                 [navParams]="DataLista">
      <button ion-button icon-only color="white">
        Home <ion-icon name="ios-arrow-forward"></ion-icon>
      </button>
    </ion-buttons>

  </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-list *ngFor="let lista of listaFinal">
    <ion-list-header *ngIf="lista.articulos.length > 0"> Pasillo {{lista.pasillo}} </ion-list-header>
    <ion-item-sliding *ngFor="let articulo of lista.articulos">
      <ion-item>{{articulo}}</ion-item>
      <ion-item-options  side="right">
        <button ion-button expandable
                (click)="onDelete(articulo)"
                color="danger"
                ><ion-icon name="md-trash"></ion-icon>Borrar</button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <button  (click)="onPush()">
    <ion-icon name="add"></ion-icon>
  </button>

  <ion-fab bottom right>
    <button  ion-fab mini
             color="danger"
             [navPush]="elegirItem"
             [navParams]="DataLista">
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-fab>
</ion-content>

ts文件

import {Component, OnInit} from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {HomePage} from "../home/home";
import { ElegiritemsPage } from "../elegiritems/elegiritems";


@Component({
  selector: 'page-lista-terminada',
  templateUrl: 'lista-terminada.html',
})
export class ListaTerminadaPage implements OnInit{
  home=HomePage;
  elegirItem = ElegiritemsPage;
  nombreLista;
  listaFinal : {pasillo: number, articulos:string []}[];
  DataLista;



  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }


  ngOnInit(){
    this.DataLista = this.navParams.data;
    this.listaFinal = this.navParams.get('listaOrden');
    this.nombreLista = this.navParams.get('listaNombre');
    this.DataLista.listaActiva = this.listaFinal;
  }


  //recibe un articulo y recorre el arreglo, en caso de ser iguales, se elimina

  onDelete(articulo) {
    for (var i = 0; i < this.listaFinal.length; i++) {
      for (var x = 0; x < this.listaFinal[i].articulos.length; x++) {
        if (this.listaFinal[i].articulos[x] === articulo) {
          this.listaFinal[i].articulos.splice(x, 1)
        }
      }
    }
    this.DataLista.listaActiva = this.listaFinal;
  }
  onPush(){
    console.log('jose');
    this.navCtrl.push(this.elegirItem);

  }
}

ElegirItems.html

<ion-header>
  <ion-toolbar color="danger">
    <ion-title>
    {{nombreLista}}
  </ion-title>

    <ion-buttons end>
      <button ion-button
              clear color="white"
              (click)="onOrganizaLista()"
              [navPush]="listaTerminada"
              [navParams]="DataLista">LISTO</button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content padding class="backgroundd">
  <ion-searchbar (ionInput)="getItems($event)">

  </ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let articulo of listaProductos">{{articulo.nombre}}
      <button ion-button icon-only
              item-end clear color="danger"
              (click)="onItemSelect(articulo)"
      ><ion-icon [name]="articulo.estado ===0 ? addBoton : remBoton" ></ion-icon></button>
    </ion-item>
  </ion-list>
</ion-content>

elegiritems.ts

import {Component, OnInit} from '@angular/core';
import { NavParams } from 'ionic-angular';
import {HomePage} from "../home/home";
import {ListaTerminadaPage} from "../lista-terminada/lista-terminada";
import {Articulo} from "../../Data/articulo.interface";
import Organizador from '../../Data/Organizador';


@Component({
  selector: 'page-elegiritems',
  templateUrl: 'elegiritems.html',
})
export class ElegiritemsPage implements OnInit{
  home=HomePage;
  listaTerminada=ListaTerminadaPage;
  listaProductos :Articulo[]=[];
  productosElegidos: Articulo[] =[];
  listaOrdenada : {pasillo: number, articulos:string[]}[];
  nombreLista:string ='';
  addBoton='ios-add-circle';
  remBoton ='md-close';
  DataLista;


  constructor(public navParams: NavParams) {
  }

  ngOnInit(){
    this.DataLista = this.navParams.data;
    this.listaProductos = this.navParams.get('articulos');
    this.nombreLista = this.navParams.get('listaNombre')
  }

  //Resetea el valor de la Lista ordenada, la cual es reducida en la pag siguiente, al volver atras le da el valor inicial

  ionViewCanEnter(){
    this.listaOrdenada = Organizador;
    this.productosElegidos = this.navParams.get('listaActiva');
    this.onActivos();
    console.log(this.productosElegidos);
  }

  //Inicia una funcion dependiendo de si pertenece o no a la lista de productos elegidos
  onItemSelect(articulo:Articulo){
    if (articulo.estado === 0) {
      this.onAddProduct(articulo);
      articulo.estado = 1;
      return
    }
    if (articulo.estado === 1)
    {
      this.onDeleteProduct(articulo);
      articulo.estado=0;
      return
    }

  }

  //resetea los valores de estado de la lista de productos y a los valores activos los deja en estado 1
  onActivos(){
    for (var i =0; this.listaProductos.length; i++){
      this.listaProductos[i].estado=0;
    }
    for (var x = 0; this.productosElegidos.length; x++){
      this.productosElegidos[x].estado = 1;
    }
  }

  //Agrega el articulo a la lista de productos elegidos
  onAddProduct(articulo: Articulo) {
    console.log(articulo);
    this.productosElegidos.push(articulo);
    console.log(this.productosElegidos);
  }

    //Elimina el articulo de la lista de productos elegidos
    onDeleteProduct(articulo: Articulo){
      const position = this.productosElegidos.findIndex((articuloEl:Articulo) =>{
        return articuloEl.nombre == articulo.nombre
      });
      this.productosElegidos.splice(position,1)
    }



  //Revisa si el articulo seleccionado forma parte del arreglo de los productos elegidos, tambien cambia el icono
  //NO IMPLEMENTADO

  onChecked(articulo){
    for (var i =0; i < this.listaProductos.length; i++) {
        if (this. listaProductos[i].nombre === articulo.nombre){
          return true
        }
    }
    return false
  }

  //Agrega los articulos a una lista ordenada que obtiene desde la basa de datos, esta esta organizada por pasillos

  onOrganizaLista(){
    for (var i =0; i < this.listaOrdenada.length; i++) {
      for (var x =0 ; x < this.productosElegidos.length; x++){
        if (this.listaOrdenada[i].pasillo == this.productosElegidos[x].pasillo){
          this.listaOrdenada[i].articulos.push(this.productosElegidos[x].nombre)
        }
      }
      x=0;
    }
    //Alimenta el arreglo para tener el nombre y la lista ordenada
    this.DataLista.listaOrden = this.listaOrdenada;
  }

  //Funcionalidad de la barra de busqueda, codigo de ionicDocs adecuado

  getItems(ev:any){
    this.listaProductos = this.navParams.get('articulos');

    let val = ev.target.value;

    if (val && val.trim() != ''){
      this.listaProductos = this.listaProductos.filter((item: any) => {
        return (item.nombre.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
}

解决方法:

这是因为您没有传递有效的导航参数,并且目标组件具有ionViewCanEnter,需要listaActiva才能使视图进入.

在this.navCtrl.push(this.elegirItem)中传递有效的导航参数；

要么

如果在进入视图之前不需要任何“防护”,请将ionViewCanEnter更改为ionViewDidLoad.

内容总结

以上是互联网集市为您收集整理的JavaScript-Ionic 2-navPush由于某些原因无法正常工作全部内容，希望文章能够帮你解决JavaScript-Ionic 2-navPush由于某些原因无法正常工作所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端