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

I have successfully sent an http.post request to PHP and retrieved some data from a MySQL database, in the form of an array containing several objects.

I can echo the data into the console.log of my browser. Also, the auth.service.ts with the http.post receives the date and I have it stored in a variable - a console.log confirms this.

However, I do not know how to show this data via the HTML page. I have seen older versions of angular users doing similar on youtube etc, but cannot translate what they have done to my project.

I don't know where to start...

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"

So I would like what is displayed in the console log, to be displayed on an HTML page, produced dynamically upon loading.

This is probably very simple as I already have the data at hand, but this is my first little app project and Ionic makes me dizzy!

Thanks for any help in advance.

You can use for loop to display your array data like this:

data = your obj of array in 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>

Let me know, it's working or not.