1

Tengo la siguiente tabla como ven no me pinta las filas con los datos del lado del servidor el api get funciona correctamente

introducir la descripción de la imagen aquí

este el código html

<table class="table table-striped">
  <tr *ngFor="let pd of service.list">
    <td (click)="populateForm(pd)">{{pd.CardOwnerName}}</td>
    <td (click)="populateForm(pd)">{{pd.CardNumber}}</td>
    <td (click)="populateForm(pd)">{{pd.ExpirationDate}}</td>
    <td>
      <i class="far fa-trash-alt fa-lg text-danger" (click)="onDelete(pd.PMId)"></i>
    </td>
  </tr>
</table>

Servicio que llama el api GET

 readonly rootURL = 'http://localhost:59035/api';
  list : PaymentDetail[];


  constructor(private http: HttpClient) { }

    
         refreshList(){
            this.http.get(this.rootURL + '/PaymentDetail/')
            .toPromise()
            .then(res => this.list = res as PaymentDetail[]);
          }

En el ts de este componente lo cargo de esta manera

      ngOnInit() {
        this.service.refreshList();
debugger;
    console.log(this.service.refreshList);
        
      }

modelos

export class PaymentDetail {

        PMId :number;
        CardOwnerName: string;
        CardNumber: string;
        ExpirationDate: string;
        CVV: string;
    }

Pruebo el api desde postman y me trae los datos correctamente

en el debugger me sale lo siguiente

**formData: {PMId: 0, CardOwnerName: "", CardNumber: "", ExpirationDate: "", CVV: ""} http: HttpClient {handler: HttpInterceptingHandler} rootURL: "http://localhost:59035/api" **

2 respuestas 2

1

intenta lo siguiente

Servicio:

refreshList(){
   return this.http.get(this.rootURL + '/PaymentDetail/');
}

ts: (aqui asumo que lo que responde el servicio es la lista, nada mas)

public lista = [];
public isLoading = true;

ngOnInit() {
   this.isLoading = true;
   this.service.refreshList()
     .pipe(finalize( () => this.isLoading = false))
     .subscribe(
        (response) => 
        {
           console.log('response:', response);
           this.lista = response
        }
     )   
}

html

<table class="table table-striped" *ngIf=(!isLoading)>
   <tr *ngFor="let pd of lista">
      ...
   </tr>
</table>

Si funciona pues perfecto, sino... me podrías mostrar que imprime en consola el console.log :) gracias

0

No estas obteniendo el resultado después de que lo cargaste.

refreshList(){
            this.http.get(this.rootURL + '/PaymentDetail/')
            .toPromise()
             //Hasta aqui todo se ve bien, pero this.list no lo vuelves a usar. 
            .then(res => this.list = res as PaymentDetail[]);
          }
   ngOnInit() {
        this.service.refreshList();
        //De la manera que lo implementas no te va a dar tiempo de que
        // se muestren los datos. Es una operación asincrona. 
        console.log(this.service.list);
        
      }

Para que tu codigo funcione debes resolver la promesa en tu componente, no en el servicio.

//Modifica esta operación para que retorne la promesa sin resolverla:

refreshList(){
            return this.http.get(this.rootURL + '/PaymentDetail/')
            .toPromise()
            
          }

Despues en tu component.ts obtienes los datos asi:


//Ahora esta variable tiene que ir aqui, en el componente
list:PaymentDetail[]=[]

ngOnInit() {
        this.service
           .refreshList()
           .then(res => {

            this.list = res as PaymentDetail[]
}));
      }

Y en el html sustituye : <tr *ngFor="let pd of service.list"> por <tr *ngFor="let pd of list">

6
  • Pongo todo lo que me dices y se desaparece la tabla es decir que no muestra ya nada, pero miro por consola y esta el array con los datos Commented el 12 dic. 2020 a las 21:19
  • Actualize mi respuesta. Revisa si te funciona.
    – Legna
    Commented el 12 dic. 2020 a las 22:20
  • Super raro sigue sin mostrar nada he intentado de mil formas y no se que será Commented el 12 dic. 2020 a las 22:44
  • Pon {{list | json }} antes del *ngFor, no dentro de una etiqueta. Y pon una captura del código y lo que te da el navegador como resultado.
    – Legna
    Commented el 13 dic. 2020 a las 15:12
  • [TU RESPUESTA] Pon {{list | json }} antes del *ngFor, no dentro de una etiqueta. Y pon una captura del código y lo que te da el navegador como resultado.
    – Legna
    Commented el 13 dic. 2020 a las 15:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.