Ionic 5 Y angular 8 Client no funciona cuando tengo instalo la app

Hola tengo el siguiente problema. Ya busque por todos lados y al parecer a todos les funciona pero ami no.

Hice una pequeña app. Donde hago autentificación con JWT, utilizo laravel del lado del backend (esta parte no falla, ya la probé con postman).

El problema que tengo es que cuando la app esta en modo de desarrollo o corriendo con el comando ionic serve la aplicación funciona bien. Pero cuando la compilo para testearla en el celular con el comando ionic cordova run android –divice ya no funciona las peticiones.

import { Component, OnInit } from "@angular/core"; import { Router } from "@angular/router"; import {   FormGroup,   FormBuilder,   FormControl,   Validator,   Validators } from "@angular/forms";  import { UserInterface } from "./../../../models/user"; import { JwtResponseInterface } from "../../../models/jwt-response"; import { AuthService } from "../../../services/auth.service";  @Component({   selector: "app-login",   templateUrl: "./login.page.html",   styleUrls: ["./login.page.scss"] }) export class LoginPage implements OnInit {   loginForm: FormGroup;    error_messages = {     email: [       { type: "required", message: "Email is required." },       {         type: "minlength",         message: "Email length must be longer or equal than 6 caracters"       },       {         type: "maxlength",         message: "Email length must be lower or equal than 60 caracters"       },       { type: "pattern", message: "Please enter a valid email address" }     ],     password: [       { type: "required", message: "Password is required." },       {         type: "minlength",         message: "Password length must be longer or equal than 8 caracters"       },       {         type: "maxlength",         message: "Password length must be lower or equal than 60 caracters"       }     ]   };   error;   constructor(     public formBuilder: FormBuilder,     private authService: AuthService,     private router: Router   ) {     this.loginForm = this.formBuilder.group({       password: new FormControl(         "",         Validators.compose([           Validators.required,           Validators.minLength(6),           Validators.maxLength(60)         ])       ),       email: new FormControl(         "",         Validators.compose([           Validators.required,           Validators.minLength(6),           Validators.maxLength(60),           Validators.pattern(             "^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9_.+-]+.[a-zA-Z0-9_.+-]+$  "           )         ])       )     });   }    ngOnInit() {}   onLogin(): void {     this.authService.login(this.loginForm.value).subscribe(       res => {         this.router.navigateByUrl("/home");       },       err => {         this.error = err;       }     );   } } 

Este es mi servicio. Creo que las interfaces no causan problema. Pero sin embargo no logro recuperar los errores que causa a nivel de aplicación.

import { Injectable } from "@angular/core"; import { HttpClient, HttpHeaders } from "@angular/common/http"; import { JwtResponseInterface } from "../models/jwt-response"; import { UserInterface } from "../models/user"; import { from, Observable, BehaviorSubject } from "rxjs"; import { tap } from "rxjs/operators"; @Injectable() export class AuthService {   AUTH_SERVER = "http://my-proyect-barcodes.esy.es";   authSubject = new BehaviorSubject(false);    private token: string;   private headers;    constructor(private httpClient: HttpClient) {     this.headers = new HttpHeaders()       // tslint:disable-next-line:quotemark       .set("Access-Control-Allow-Origin", "*")       // tslint:disable-next-line:quotemark       .set("Content-Type", "application/json");   }    login(user: UserInterface): Observable<JwtResponseInterface> {     return this.httpClient       .post<JwtResponseInterface>(`$  {this.AUTH_SERVER}/api/login`, user, {         headers: this.headers       })       .pipe(         tap((res: JwtResponseInterface) => {           if (res) {             this.saveToken(res.access_token, res.expires_at, res.token_type);           }         })       );   }    register(user: UserInterface): Observable<JwtResponseInterface> {     return this.httpClient       .post<JwtResponseInterface>(`$  {this.AUTH_SERVER}/api/register`, user, {         headers: this.headers       })       .pipe(         tap((res: JwtResponseInterface) => {           if (res) {             this.saveToken(res.access_token, res.expires_at, res.token_type);           }         })       );   }    logout(): void {     this.token = "";     localStorage.removeItem("ACCESS_TOKEN");     localStorage.removeItem("EXPIRES_AT");     localStorage.removeItem("TONKEN_TYPE");   }    private saveToken(     token: string,     expires_at: string,     token_type: string   ): void {     localStorage.setItem("ACCESS_TOKEN", token);     localStorage.setItem("EXPIRES_IN", expires_at);     localStorage.setItem("EXPIRES_TYPE", token_type);     this.token = token;   }    private getToken(): string {     if (!this.token) {       this.token = localStorage.getItem("ACCESS_TOKEN");     }      return this.token;   }    checkAuth() {     let date = new Date(localStorage.getItem("EXPIRES_IN"));     let token = localStorage.getItem("ACCESS_TOKEN");     let now = new Date();     if (date < now) {       return false;     } else {       return true;     }   } } 

Si alguien puede orientarme haciadonde debo debuguear mi aplicación o tiene algún ejemplo de la solución no dude en decirme. No importa que este en inglés lo entiendo lo suficiente para poder comprender donde estoy fallando.

AYUDA, como agregar a un array, datos moficados atravez de pipe() -> tap() en Angular

Todo se inicio por problemas con la fecha (Date) porque Angular me mostraba la fecha de la base de datos con un dia menos. Y en busqueda de corregir eso problema, llegue a esto:

clientes.component.ts

ClientesActualizado: cCliente[];  this.clienteService.getClientes(page).pipe(         tap(response => {            /*convertimos el content a una lista de Cliente */           (response.content as Cliente[]).forEach(cliente => {      //ESTO PARA PROBAR QUE MUESTRAN TODOS LOS NOMBRES             console.log(cliente.nombre);      //MODIFICANDO la fecha, agregandole un dia mas             const createdAtCovert = moment(cliente.createAt).add(1, 'days');             this.date = createdAtCovert.format('YYYY-MM-DD');       //LO AGREGA PERO POR SEPARADO, utiliza el array para un solo cliente, no los mete todos a la vez.               this.ClientesActualizado = [({id: cliente.id, nombre:cliente.nombre, apellido: cliente.apellido,                 email:cliente.email, createAt: this.date})];              console.log( this.ClientesActualizado)           });          }) 

introducir la descripción de la imagen aquí

cliente.component.html

<tbody>         <tr *ngFor="let cliente of ClientesActualizado">           <td>{{cliente.id}}</td>           <td>{{cliente.nombre}}</td>           <td>{{cliente.apellido | lowercase }}</td>           <td>{{cliente.email}}</td>           <td>{{cliente.createAt | date:"EEEE dd, MMMM yyyy"}}</td>            <td>             <button type="button" name="editar" [routerLink]="['/clientes/form', cliente.id]" class="btn btn-primary">Editar</button>           </td>           <td>             <button type="button" name="eliminar" (click)='delete(cliente)' class="btn btn-danger">Eliminar</button>           </td>         </tr>       </tbody> 

Quise agregar a un nuevo array con los datos moficados que obtuve de tap(response => {}), modificando la fecha, para luego mostrarlo en HTML. Por favor espero que me puedan ayudar, o tal vez hay otra forma de corregir el error de Angular de mostrar la fecha con un día menos. Llevo muy poco tiempo que pase al manejo de Spring y Angular

Usar plugins de apache cordova (sin usar Ionic) en una aplicación desarrollada con angular 2+ (que usa typescript)

Hay mucha información disponible de como integrar apache cordova con un desarrollo angular2+ (yo lo he conseguido hacer sin problemas) pero muy poca información sobre como integrar correctamente los plugins de cordova en estos desarrollos (que es el motivo final de usar cordova) Cada plugin tiene sus forma de uso peor la duda aquí es en general, tras instalarlo en el proyecto cordova por linea comando, ¿como acceder a sus propiedades en un modulo o servicio typescript de angular?

He llegado a dudar de que se puedan usar en typescript correctamente los plugins de cordova porque no encuentro ejemplos de uso en la web misma de apache cordova

He visto que en Ionic usan Ionic Native que es una especie de adaptación de los plugins de cordova para ser usados correctamente en typescript y mi duda es si existe algo asi para cordova solo, sin tener que instalar ionic en el proyecto. ¿Sería posible usar Ionic Native en un proyecto cordova + angular2+ sin tener que instalar el framework de ionic, es decir, solo usando apache cordova con angular7 y instalando el modulo de Ionic Native por linea comando sin instalar todo el framework de Ionic?

Googleando descubrí que algunos plugins de cordova se han actualizado para usar en angular2+ con ‘typing’, pero no encuentro mucho sobre que es realmente y como usar esa mejora.

Sinceramente, ahora estoy un bastante perdido, tengo mi proyecto preparado para usar plugins de cordova con angular7 en mi caso y no se ya donde investigar y como hacerlo bien, no encuentro información ni ejemplos de uso.

Alguien que se haya peleado y lo haya conseguido por favor podría ayudar a al menos poner en la dirección correcta de por donde empezar?

Agradecería mucho aunque solo sean unas palabras de ayuda o clarificarnos un poco a los que estamos en esta situación.

Muchas gracias de antemano

filtrar de una api externa angular

y gracias e antemanos por la ayuda.

he desplegado mediante el verbo get de una api externa (https://reqres.in/api/users)en mi servicio los usuarios en mi componente lista de usuarios. En unos botones tengo sus id’s y ahora necesito en mi otro componente imagen, desplegar la imagen asociada a ese id con su email.

La funcion que he asignado al boton mostrarUsuario() para capturar el evento. {{usuario.id}}.

No sé cómo hacer para, al pulsar cada boton con su id, deplegar en el otro componente la imagen.

Retornar valor desde un id en Angular con Firebase

Estoy creando una tienda virtual en Angular, en la que listo los productos por categoría, me gustaría que cuando llame {{producto.id_category}} en vez de darme solamente el ID largo que tiene Firebase, quisiera que mediante alguna función o pipe no estoy seguro, me devuelva el nombre de la categoría que también tengo guardada en otra lista en Firebase.

He visto varios tutoriales de Angular, sin embargo ninguno con esta característica de conocer alguno les estaré agradecido me lo recomienden.

Modificar estilos de un componente en Ionic 5 y angular 7

Estuve leyendo sobre el tema. Según entendí angular agrego una funcionalidad que hace que se encapsulen los estilos de un componente. No entendí bien como funciona esto. Pero entendí que para referir a los estilos del componente hay dos formas:

Ayer pregunte esto pero era demasiado tarde por lo que no tuve respuestas.

:host{   ion-content {     background: red;   } }  // O esta otra forma  page-name{     ion-content{        background: red;     } } 

Mi problema es que directamente no me funciona. Siempre tengo que hacer lo siguiente.

:host{   ion-content {     --background: red;   } } 

De esta forma si se toman los estilos. Pero se vuelven recurrentes. Por lo que si reescribo los estilos de un componente de ionic, este se aplica para todos los hijos de este componente.

introducir la descripción de la imagen aquí

Este es el código que tengo. Espero me puedan ayudar.

HTML

<ion-content class="background">   <ion-card-content>     <img class="logo" src="assets/logo/579358.svg" alt="">     <ion-card-header>       <ion-card-title text-center>Reading the barcode</ion-card-title>       <ion-card-subtitle text-center>welcome to the your new app</ion-card-subtitle>     </ion-card-header>     <form [formGroup]="loginForm">       <ion-item>         <ion-label position="floating">           email         </ion-label>         <ion-input formControlName="email" type="text" name="email"></ion-input>       </ion-item>       <div class="error-messages">         <ng-container *ngFor="let error of error_messages.email">           <div class="error-message"             *ngIf="loginForm.get('email').hasError(error.type) && (loginForm.get('email').dirty || loginForm.get('email').touched)">             {{ error.message }}           </div>         </ng-container>        </div>       <ion-item>         <ion-label position="floating">           password         </ion-label>         <ion-input formControlName="password" type="password" name="password"></ion-input>       </ion-item>       <div class="error-messages">         <ng-container *ngFor="let error of error_messages.password">           <div class="error-message"             *ngIf="loginForm.get('password').hasError(error.type) && (loginForm.get('password').dirty || loginForm.get('password').touched)">             {{ error.message }}             </div>         </ng-container>        </div>       <br>       <ion-button (click)="onLogin()" [disabled]="!loginForm.valid" expand="block" shape="round">         <ion-icon slot="start" name="contact"></ion-icon>         Login       </ion-button>     </form>   </ion-card-content> </ion-content> 

SCSS

:host {     ion-content {         --background: url("./../../../../assets/App/7243-01-low-poly-background-16x9-1.jpg") !important;         --ion-background-color: #006ff8 !important;         background-position: center, center !important;         background-repeat: no-repeat !important;         background-size: cover !important;     } } 

Paginador en angular

tengo una tabla con un paginador voy a la segunda pagina y todo esta bien pero cuando quiero devolverme a la primer pagina esta se queda en la segunda lo que busco es que si hay 20 registros en la tabla me muestre 4 paginas cada una con 5 registros y que cada vez que me devuelva esta me muestre los mismos datos estoy utilizando Angular 8 y ngprime donde tengo que hacer este cambio o que es lo que estoy haciendo mal no logro ver que es

codigo html

<p-tabView>     <p-tabPanel header="Listado de auditorias" rightIcon="pi pi-table" tooltip="Listado de auditorias">         <br>         <p-table #dt [columns]="cols" [loading]="loading" selectionMode="single" [value]="auditorias.registros" [paginator]="true" [rows]="5" [lazy]="true" (onLazyLoad)="loadCarsLazy($  event)" [paginator]="true" [rows]="2" [totalRecords]="totalRecords" [responsive]="true" >             <ng-template pTemplate="header" let-columns>                 <tr>                     <th *ngFor="let col of columns" [pSortableColumn]="col.field">                         {{col.header}}                         <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>                     </th>                 </tr>                 <tr>                     <th *ngFor="let col of columns" [ngSwitch]="col.field">                         <div class="ui-inputgroup" *ngSwitchCase="'fecha'">                             <input class="ui-g-12 ui-md-6" pInputText type="text" (input)="getAllByFilter($  event.target.value, col.field, col.filterMatchMode, undefined, undefined)">                             <span class="ui-inputgroup-addon"><i class="pi pi-filter"></i></span>                         </div>                         <div class="ui-inputgroup" *ngSwitchCase="'usuario'">                             <input class="ui-g-12 ui-md-8" pInputText type="text" (input)="getAllByFilter($  event.target.value, col.field, col.filterMatchMode, undefined, undefined)">                             <span class="ui-inputgroup-addon"><i class="pi pi-filter"></i></span>                         </div>                         <div class="ui-inputgroup" *ngSwitchCase="'accion'">                             <input class="ui-g-12 ui-md-8" pInputText type="text" (input)="getAllByFilter($  event.target.value, col.field, col.filterMatchMode, undefined, undefined)">                             <span class="ui-inputgroup-addon"><i class="pi pi-filter"></i></span>                         </div>                         <div class="ui-inputgroup" *ngSwitchCase="'ip'">                             <input class="ui-g-12 ui-md-8" pInputText type="text" (input)="getAllByFilter($  event.target.value, col.field, col.filterMatchMode, undefined, undefined)">                             <span class="ui-inputgroup-addon"><i class="pi pi-filter"></i></span>                         </div>                     </th>                 </tr>             </ng-template>             <ng-template pTemplate="body" let-rowData let-columns="columns">                 <tr [pSelectableRow]="rowData">                     <td *ngFor="let col of columns">                         <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field]}}                     </td>                 </tr>             </ng-template>             <ng-template pTemplate="emptymessage" let-columns>                 <tr>                     <td [attr.colspan]="columns.length">                         <p-message severity="info" text="No hay registros disponibles para mostrar"></p-message>                     </td>                 </tr>             </ng-template>         </p-table>     </p-tabPanel> </p-tabView> 

codigo

if (filter === null         || filter.filtro === undefined         || (filter.filtro.accion === undefined         ||  filter.filtro.fecha === undefined         || filter.filtro.usuario === undefined         ||  filter.filtro.ip === undefined)) {         this.getAllConsultorias(event.first, (event.first + event.rows));     }     if (filter.filtro !== undefined && filter.filtro.accion !== undefined) {          this.getAllByFilter(filter.filtro.accion, 'accion', undefined, event.first, (event.first + event.rows));     }     if (filter.filtro !== undefined && filter.filtro.fecha !== undefined) {          this.getAllByFilter(filter.filtro.fecha, 'fecha', undefined, event.first, (event.first + event.rows));     }     if (filter.filtro !== undefined && filter.filtro.ip !== undefined) {       this.getAllByFilter(filter.filtro.ip, 'ip', undefined, event.first, (event.first + event.rows));     }     if (filter.filtro !== undefined && filter.filtro.usuario !== undefined) {       this.getAllByFilter(filter.filtro.usuario, 'usuario', undefined, event.first, (event.first + event.rows));     }      } } 

como puedo agregar un parametro a una url ya existente en angular

Tengo un formulario con paginacion. cuando hago la consulta al api con los parámetros que el usuario selecciona del formulario, la respuesta me viene con el enlace a la siguiente pagina, pero a este enlace debo agregarle otro parámetro que no me esta devolviendo y es obligatorio, como podría hacer para que en el botón de paginacion “Pagina Siguiente” o “Pagina Anterior” usar esa misma URL pero agregar un nuevo parámetro (ese que necesito) ? he visto que lo mas parecido es usar

queryParamsHandling: 'merge' }

pero en los pocos ejemplos que he encontrado veo que solo colocan esa linea de codigo y no ponen el parámetro que quieren agregar a la URL, no creo que es lo que sirve para lo que quiero lograr. como podría hacer eso ? Alguien con experiencia podría ayudarme? gracias de antemano al que pueda ayudarme.

create an amazing website in Angular JS and asp.Net Core for $50

AngularJS is a JavaScript-based open-source front-end web framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. I’ll be your Angular JS programmer and will develop your Angular web app. I’m very expert in Agular JS and will also convert your Bootstrap template to the Angular project. For a Back-end purpose, I’ll develop your Angular project using PHP or asp.Net core. I can develop Online stores, Social media platform and any other business web application.

by: ruhul147
Created: —
Category: Coding
Viewed: 172


Mostrar objeto en un select Angular

estoy sacando una serie de datos de mi base de datos a través de mi API REST pero cuando quiero pintar los datos no me los muestra sin embargo si le hago un console.log a result me saca los datos que quiero, el problema es que al hacer un console.log de ots no me saca nada undefined me dice.

Probé creando un modelo y todo lo demás:

ots:Array<Ots>  ots:any  ots:string[]  ots = new Array() 

Todo eso he probado…

Ahora os dejo mi código del TS

  getots() {     this.webData.getots().subscribe(       result => {          if(result["code"] = 200) {           this.ots = result["data"];           console.log(result);           console.log(this.ots);         } else {           console.log('Error');         }       },       error => {         console.log(<any>error);       }     );   } 

Y aquí os dejo una captura de la consola

introducir la descripción de la imagen aquí