Как вернуть данные JSON в виде таблицы в моем файле template.html на угловом

Question

Я - нуб, веб-разработчик, и мне как-то поручено написать какой-то ракурс для подготовки этих отчетов, хотя я понятия не имею, что делаю (в основном, мой работодатель хочет узнать, смогут ли они избежать нового найма) если они могут избежать этого). Вот мой файл component.ts:

import { HttpClient } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";

@Component({
  styleUrls: ["./styles.scss"],
  templateUrl: "./template.html"
})
export class MyRouteData {
  MyDataObject: object;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .get("http://localhost:54499/MyRoute/GetMyData")
      .subscribe(response => {
        console.log(response);
        this.MyDataObject = response;
      });
  }
}

Где конечная точка GetMyData в основном выполняет следующий запрос:

Select Top 20 CustomerId, FirstName, LastName, Address, PhoneNumber, Created From Customers Order by Created Desc

Я могу вернуть данные на страницу в формате JSON со следующим файлом template.html:

<div style="background-color: white; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12); padding: 16px 8px 0 8px">
    <table>
        <tr>
            <td>{{MyDataObject|json}}</td>
        </tr>
    </table>
</div>

Как вернуть данные на экран в таблице?

Я сделал несколько попыток и сделал несколько циклов, но безуспешно.

Answer 1

Вам нужно использовать ngFor:

HTML

    <div style="background-color: white; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12); padding: 16px 8px 0 8px">
        <table>
         <thead>
           give the table head columns
         </thead>
            <tr *ngFor="let data of MyDataObject">
                <td>{{data.name}}</td>
                <td>{{data.value}}</td>
            </tr>
        </table>
    </div>