IONIC/Angular 在视图上显示单个 object - ngIF*

Question

我想寻求帮助，因为我遇到了一些问题。基本上我从外部 API (Strapi) 得到一些 object 并且我在 GET 方法中接收它，但是当我试图用 ngIF[=33 在视图上显示它时=]* 未显示。

这是我的代码：

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}`);
  }
}

Answer 1

原因是您正在获取一个数组，而数组没有 id 或 name。

你应该改变

      this.information = result;

到

      this.information = result[0];