I am in need of assistance as I have encountered an issue. Essentially, I am fetching an object from an external API (Strapi) using the GET method, but when attempting to display it on Views with ngIF, it fails to show up.
https://i.sstatic.net/nFyOE.png https://i.sstatic.net/H4ubU.png
Below is the code snippet:
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}`);
}
}