在 Ionic 页面上显示从 PHP 接收的数据列表

Question

我已经成功地向 PHP 发送了一个http.post 请求，并从 MySQL 数据库中检索了一些数据，这些数据以包含多个对象的数组的形式出现。

我可以将数据回显到浏览器的 console.log 中。 此外，带有http.post 的 auth.service.ts 接收日期并将其存储在变量中 - console.log 确认了这一点。

但是，我不知道如何通过 HTML 页面显示这些数据。我在 youtube 等上看到过旧版本的 angular 用户做类似的事情，但无法将他们所做的事情翻译到我的项目中。

我不知道从哪里开始......

AUTH.SERVICE.TS (this functions)

getCoursList(date) {
return this.http.post('http://localhost/Attendance App/myApp/src/app/api/getCours.php', {
  date,
}).subscribe(data => {
  console.log(Object.values(data));
  const planning = Object.values(data);
  const grabArray = planning[0];
  const id = grabArray.intervenant;
  if (id !== undefined) {
    // console.log('test array', id);
    this.router.navigate(['/cours/', id]);
  };
},

GETCOURS PHP FILE (this functions)

$stmt = $conn->prepare("SELECT * FROM planning WHERE intervenant = :id AND date = :date");
$stmt->execute([':id' => $id, ':date' => $date]);

if ($stmt->rowCount() > 0) {
    // $output = array();
    $output = $stmt->fetchAll();
    echo json_encode($output);
} else {
    $errors = "No data found for this date";
    echo json_encode($errors);
}

CONSOLE LOG DISPLAY OF RESULTS


[object Array]: [Object, Object]

0: Object
cours: "CFA"
date: "2019-09-20"
duration: "1h30m"
etudiant: "12"
id_planning: 1
intervenant: "2"
lieux: "Nice 1"
time: "13:15:00"

__proto__: Object

1: Object
cours: "Outils Numeriques"
date: "2019-09-20"
duration: "1h30m"
etudiant: "16"
id_planning: 4
intervenant: "2"
lieux: "Monaco High School"
time: "13:15:00"

__proto__: Object
length: "2"

所以我希望控制台日志中显示的内容显示在 HTML 页面上，在加载时动态生成。

这可能很简单，因为我手头已经有了数据，但这是我的第一个小应用项目，Ionic 让我头晕目眩！

提前感谢您的帮助。

Answer 1

您可以使用 for 循环来显示您的数组数据，如下所示：

data = 你的 obj 数组 在 page.ts 中

datalist: any[];

this.datalist = data

  <ion-list>
    <ion-item *ngFor="let d of datalist ">
      <p>{{d.cours}}</p>
      <p>{{d.date}}</p>
      <p>{{d.duration}}</p>
      <p>{{d.etudiant}}</p>
      <p>{{d.id_planning}}</p>
      <p>{{d.intervenant}}</p>
      <p>{{d.lieux}}</p>
      <p>{{d.time}}</p>
    </ion-item>
  </ion-list>

告诉我，它是否有效。