Question

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

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

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

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

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>

让我知道，它是否有效。

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

1 个答案: