javascript - 以离子和角度将变量从 .ts 传递到 .html

Question

我是 ionic 4 和 angular 的新手，从 http 检索 json 数据，在控制台中我完美地得到了 json，如何将这些数据从 .ts 传递到 .html 并显示它们

主页.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private http: HttpClient) {
    this.http.get('https://mysite/reset-api.php').subscribe((response: any) => {
    console.log(response);
});
  }
}

主页.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
 
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>  Title   </ion-card-subtitle>
      <ion-card-title>Card Title</ion-card-title>
    </ion-card-header>
  
    <ion-card-content>
      Keep close to Nature's heart... and break clear away, once in awhile,
      and climb a mountain or spend a week in the woods. Wash your spirit clean.
    </ion-card-content>
  </ion-card>
    




</ion-content>

标签： javascripthtmlangularfetchionic4

Answer 1

将来自 API 的响应保存在 TS 文件的局部变量中。看起来您的 JSON 响应是一个数组。每个项目似乎都有一个id和一个title，尽管可能数组的每个元素也有其他字段。

您可以使用 an*ngFor*从 HTML 模板中的 TS 文件中迭代该变量。然后在每个循环中，按名称访问这些数组元素的字段。例如，{{ item.title }}在模板中将替换title为该数组元素的值。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  dataArray;
  constructor(private http: HttpClient) {
    this.http.get('https://mysite/reset-api.php').subscribe((response: any) => {
    console.log(response);
    this.dataArray = response;
});
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
 
  <ion-card *ngFor="let item of dataArray">
    <ion-card-header>
      <ion-card-subtitle>{{ item.title }}</ion-card-subtitle>
      <ion-card-title>Card Title</ion-card-title>
    </ion-card-header>
  
    <ion-card-content>
      Keep close to Nature's heart... and break clear away, once in awhile,
      and climb a mountain or spend a week in the woods. Wash your spirit clean.
    </ion-card-content>
  </ion-card>
    




</ion-content>