在 ionic 和 angular 中将变量从 .ts 传递到 .html

Question

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

展示它们

home.page.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);
});
  }
}

home.page.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>

Answer 1

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

您可以使用 *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>

Answer 2

谢谢大家，关于同样的问题，我可以问更多吗，我添加了一个可点击的按钮来显示另一个页面，其中包含有关所选项目的更多信息，

    <ion-list *ngFor="let item of dataArray">
    <ion-item>
      <ion-thumbnail slot="start">
        <img class="img-thumbnail" src="http://mysite//uploads/{{ item.document }}">
      </ion-thumbnail>
      <ion-label>
        <h2 color="primary">{{ item.title }}</h2>
        <h3>{{ item.city }}</h3>
        </ion-label>
        <ion-button color="primary"  item-end>Show</ion-button>
      
    </ion-item>
  </ion-list>

我想打开另一个页面但是我归档了，我怎么打开另一个页面>

在 ionic 和 angular 中将变量从 .ts 传递到 .html

pass variables from .ts to .html in ionic and angular

html

javascript

fetch

angular

ionic4