- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
navPush 停止工作,我真的不知道为什么。它不适用于 this.nav.push() 或 navPop。我试过更多的按钮,导航按钮,我真的不明白为什么不起作用。
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
让 View 进入。
在this.navCtrl.push(this.elegirItem);
中传递有效的导航参数
或者
如果您不希望在 View 进入之前有任何“守卫”,请将 ionViewCanEnter
更改为 ionViewDidLoad
。
关于javascript - ionic 2 - navPush 出于某种原因无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45262302/
我想在聚焦时使用 ion-input 更改 ion-item 内的 ion-label 颜色。 我可以使用 --highlight-color-focused: yellow; 更改 ion-item
我想用 ionic 3 ion-list (或任何在 Ionic 3 中有效的东西)来显示水平列表而不是典型的垂直列表。 寻找解决方案 没有大量的 css 或难以维护的代码。
我目前使用 ionic 和我的 cordova 插件同时开发一个应用程序。我想知道如何使用文件 plugins/fetch.json 从本地文件系统更新我的插件。有什么想法吗? 最佳答案 使用 ion
当我在 ionic 项目文件夹中运行 ionic link 命令时,我收到以下错误消息 “除非您在 Ionic 项目文件夹中,否则您无法运行此命令” 我的系统信息。 Cordova CLI:6.3.1
如何注释 ion-row这样它就可以填满剩余的空间? 对于以下示例,黄色行“内容”应展开,直到占用所有剩余(绿色)空间。 Example text
我正在尝试构建一个 ionic 应用程序,但是当我运行 npm run ionic:build -–prod 时,出现以下错误: npm run ionic:build -–prod npm ERR!
我想在 ion-footer-bar 中添加两个按钮,如图片,但我的代码无法正常工作。 Button 333333333 Button
请有人澄清一下我什么时候会使用 ion-nav-view反对 ion-view ?我正在学习 AngularJS/Ionic(我对 AngularJS 有基本的了解;并且想使用 Ionic 来增强它)
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗?更新问题,以便可以通过 editing this post 用事实和引文回答问题. 1年前关闭。 Improve t
item-avatar 在我的项目中不起作用,它根本不显示 item-avatar 元素。 Recent Conversations
我正在使用带有属性interface="popover"的ion-select。弹出窗口在 select 下方打开,这使得弹出窗口非常小。 我发现,如果 ion-select 中有 10 个或更多项目
我创建了一个带有电容器的新项目 ionic。我使用 ionic 选择,但我有一个新的 ionic 选择选项,带有大文本,而不是在输入中分布。 Plaga/Enfermedad Al
如何像 ionic 中的许多应用程序一样滑动切换段?我在 ionic 官方文档中找不到任何 api。我只能找到this有用的线程。 但它似乎并不完美。有更好的解决办法吗? ionic 信息: Cord
我正在开发一个登录表单,所以在我的 中我有一个 (用作登录表单的容器)我想垂直居中。我用 css flexbox 和其他 css 技巧尝试了不同的方法,但对我没有任何作用!该卡片保留在页面顶部。你
我想在 ionic 选择(组合框)更改时隐藏和显示文本框 例如我有: ionic 选择中的 1 和 2如果我选择 1 文本框将隐藏,如果我选择 2 文本框将出现 这是我当前的代码: .ts onCha
我尝试在 ionic 4 中使用 ion-button 实现一个按钮,但没有样式输出,问题出在哪里,求助。 最佳答案 请使用以下代码 这里是 ionic v4 按钮的文档。 https://beta
我有一个在 ionic serve 中运行良好的应用程序。我现在正在尝试创建一个构建——这通常有效,但今天我遇到了问题。 ionic package build ios --profile devel
我正在使用 Ionic 2,在我的应用程序中我正在创建一个表单,如果出现验证错误,信息图标将出现在相关输入字段的右侧。 HTML如下,
我正在与一个远程团队一起开发 Ionic 1 应用程序,最近我们的版本彼此不喜欢。我想知道我是否也一直在从事 Ionic 2 项目,无论出于何种原因,我的 CLI “认为”这些应用程序也是 Ionic
我需要禁用默认 ion-ripple-effect在“ ionic 按钮”中。 我无法禁用 pointer-events因为我需要它。 PS:我引用了以下帖子,但找不到适合 Ionic 4
我是一名优秀的程序员,十分优秀!