CODEWITHSUNDEEP
angulartypescriptionic-frameworkngfor
johnsmith
johnsmith

Reputation: 47

IONIC/Angular display single object on View - ngIF*

I would like to ask for help because I'm facing some problem. Basically I am getting some object from external API (Strapi) and I am receiving it within GET method, but when I'm trying to display it on Views with ngIF* it is not being displayed.

Picture 2 Picture 1

Here is my code:

word-details-page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ information?.name }}</ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content padding>
 
  <ion-card *ngIf="information">
    <ion-card-header>
      <ion-card-title>
        hello
        {{ information.id }}
      </ion-card-title>
      <ion-card-subtitle>
        {{ information.name }}
      </ion-card-subtitle>
    </ion-card-header>
  </ion-card>
  
</ion-content>

word-details-page.ts

import { WordsService } from './../../services/words.service';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
 
@Component({
  selector: 'app-word-details',
  templateUrl: './word-details.page.html',
  styleUrls: ['./word-details.page.scss'],
})
export class WordDetailsPage implements OnInit {
 
  information = null;
  result: Object;
 
  /**
   * Constructor of our details page
   * @param activatedRoute Information about the route we are on
   * @param wordService The word Service to get data
   */
  constructor(private activatedRoute: ActivatedRoute, private wordService: WordsService) { }
 
  ngOnInit() {
    // Get the ID that was passed with the URL
    let id = this.activatedRoute.snapshot.paramMap.get('id');
 
    // Get the information from the API
    this.wordService.getDetails(id).subscribe(result => {
      this.information = result;
      console.log(this.information);
      alert(JSON.stringify(this.information));

    });
  }
 
  openWebsite() {
    window.open(this.information.Website, '_blank');
  }
}

words.service.ts

  /**
  * Get the detailed information for an ID using the "i" parameter
  * 
  * @param {string} id wordID to retrieve information
  * @returns Observable with detailed information
  */
  getDetails(id) {
    return this.http.get(`${this.url}?id=${id}`);
  }
}

Upvotes: 1

Views: 202

Answers (1)

Marco
Marco

Reputation: 1093

The reason is that you are getting an array, and array doesn't have id or name.

You should change from

      this.information = result;

to

      this.information = result[0];

Upvotes: 1

Related Questions