1

Quisiera realmente saber cual es el problema en los siguientes fragmentos de código, he estado tratando de solucionarlo pero no encuentro una solución, estuve buscando la forma de mostrar datos pero lamentablemente no logre nada.

Coloco los siguientes código referente a lo mencionado:

Este es el app.module.ts

`import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TodoitemProvider } from '../providers/todoitem/todoitem';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    TodoitemProvider
  ]
})
export class AppModule {}`


**Este es el provider**

`import { Url } from './../../pages/clases/Url';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

/*
  Generated class for the TodoitemProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class TodoitemProvider {

  private OBTENER_ITEM: string = Url.URL_TEST + '/api/todo/[id]';

  constructor(
    public http: HttpClient) {
    console.log('Hello TodoitemProvider Provider');
  }

  public obtener_item(Id){
    const ruta: string = this.OBTENER_ITEM.replace('[id]', Id);
    console.log("RUTA: ", ruta);
    return this.http.get(ruta)
      .catch(() =>
        Observable.throw('ERROR OBTENER_ITEM'));
  }

}`

Este es el DTO

interface ISTodoItem { Id?: number; Name?: string; IsComplete?: boolean; }

Este es el Home.ts

`import { TodoitemProvider } from './../../providers/todoitem/todoitem';
import { Component } from '@angular/core';
import { NavController, Platform, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public detalleItem: ISTodoItem = {};
  Id: any;

  constructor(
    public navCtrl: NavController,
    public platform: Platform,
    public serviceTodoItem: TodoitemProvider,
    public navParams: NavParams) {

    // this.platform.ready().then(() => {
    //   platform.registerBackButtonAction(() => {
    //     return;
    //   })
    // })
  }

  ngOnInit() {
    this.obtener_items();
    console.log("OBTENER_ITEMS: ", this.obtener_items);
  }

  private obtener_items() {
    console.log('INICIAR OBTENER_ITEMS');
    this.serviceTodoItem.obtener_item(1).subscribe((data) => {
      this.detalleItem = data;
      console.log("DATA: ", this.detalleItem);
    }, (err) => {
      console.log(err);
    })
    console.log("FIN DE OBTENER LISTA")
  }
}`

Este es Home.html

<pre>
<ion-card>
  <ion-card-header class="ion-center" color="primary">
    <strong>Datos: </strong>
  </ion-card-header>
  <ion-card-content>
    <ion-item>
      Nombre: {{detalleItem.Name}}
      <br>
      esta Completado: {{detalleItem.IsComplete}}
    </ion-item>
    <!-- <ion-item>

    </ion-item> -->
  </ion-card-content>
</ion-card>
</pre>

Resultado final:

introducir la descripción de la imagen aquí

Como se puede apreciar los datos que quiero me muestra normalmente en la consola de Chrome, pero luego para querer mostrarlo en la pantalla no me trae ningún valor.

1 respuesta 1

2

Por lo que veo estas tratando de acceder a las propiedades con nombres incorrectos, en tu interfaz cámbiala por lo siguiente debido a que así vienen los datos de el servicio:

interface ISTodoItem {
  id?: number;
  name?: string;
  isComplete?: boolean;
}

Despues en tu home.html cambia:

Nombre: {{detalleItem.Name}}     
esta Completado: {{detalleItem.IsComplete}}

Por:

Nombre: {{detalleItem.name}}     
esta Completado: {{detalleItem.isComplete}}

Ya que así se están imprimiendo en consola

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.