Hola buenas sigo con el problema ya que ion-toggle no he podido solucionar intente crear un componente toggle solo que ahora me encuentro que solo me realiza la función una vez la segunda vez que le doy no se desactiva automáticamente.
creo un componente de la siguiente manera:
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'toggle-buttom',
templateUrl: './toggle-buttom.component.html',
styleUrls: ['./toggle-buttom.component.scss'],
})
export class ToggleButtom implements OnInit {
@Input() isActive: boolean = false
@Output() onChangeToggle = new EventEmitter<any>()
constructor() { }
ngOnInit() {}
changeToggle(){
if(this.isActive){
this.isActive = false
}else{
this.isActive = true
}
this.onChangeToggle.emit({value: this.isActive})
}
}
en html:
<label class="toggle-content" [ngClass]="{'toggle-active': isActive}" (click)="changeToggle()">
<div class="toggle-circle"></div>
después en el ts donde va el componente:
change_product_standout(event, productId){
console.log('Change Product', event)
const data = {
'user_id': this.api.userdata.user_id,
'api_token': this.api.userdata.api_token,
'product_id': productId
};
this.productService.change_product_standout(data, (event.value)).subscribe(response => {
if(response.status == true){
this.util.errorToast(response.msg);
const product = this.product_list.find(product => product.product_id == productId);
product.standout = false;
}
})
}
el el htm:
<ion-item lines = "none">
<toggle-buttom [isActive]="product_item.standout" (onChangeToggle)="change_product_standout($event, product_item.product_id)" ></toggle-buttom>
<ion-label class="general_txt">Destacar</ion-label>
</ion-item>
y por ultimo en la api tengo esto:
public function set_product_standout(Request $request){
$result=$this->check_usertoken($request->user_id,$request->api_token);
if(!$result) {
return response()->json(['status'=>'0', 'msg'=>'Algo ha salido mal.']);
}
/*
1. Destacar el producto cuando el usuario no sea Free
2. Destacar cuando la Cantidad permitida del Plan no ha excedido
*/
$user = Users::find($request->user_id);
$quota = Quota::where('user_id', $user->user_id)->orderByDesc('end_date')->get()[0];
$subscriptionPlan = SubscriptionPlans::find($quota->subscription_plan_id);
if($user->subscription_type == 'Free'){
return response()->json(['status'=>'1', 'msg'=>'Tu cuenta es Free, no es posible destacar productos']);
}
$productsStandoutOfUser = Product::where('user_id', $user->user_id)->where('standout', true)->count();
if($subscriptionPlan->product_quantity == $productsStandoutOfUser){
return response()->json(['status'=>'1', 'msg'=>'Cantidad limite de productos destacados ha excedido, Productos Limite:' . $subscriptionPlan->product_quantity]);
}
/* Cambiar el Producto a Destacado */
$product = Product::find($request->product_id);
Product::where('product_id', $product->product_id)->update(['standout' => true]);
return response()->json(['status'=>'0', 'msg'=>'Producto actualizado como Destacado', 'data' => true]);
}
public function set_product_not_standout(Request $request){
$result=$this->check_usertoken($request->user_id,$request->api_token);
if(!$result) {
return response()->json(['status'=>'1', 'msg'=>'Algo ha salido mal.']);
}
$product = Product::find($request->product_id);
Product::where('product_id', $product->product_id)->update(['standout' => false]);
return response()->json(['status'=>'0', 'msg'=>'Producto cambiado a no destacado', 'data' => true]);
}
vale esto es todo el funcionamiento es el siguiente tengo unos productos donde según la base de datos podemos destacar un numero X cuando apretar el toggle selecciono el producto a destacar y cuando sobrepasas la cantidad a destacar envió un aviso y el toggle retorna a su estado de apagado, así me funciona pero solo una vez al volver a seleccionar el toggle mas de dos veces no vuelve a su estado de apagado como que solo se repite una vez la función, con el toggle de ionic me funcionaba bien excepto cuando arrastraba el toggle no volvía a su estado, no se si alguien puede ayudarme se que es complicado pero gracias.
ionChange
en lugar declick
.