如何以角度形式将我的template.html文件中的JSON数据作为表格返回

Question

我是一个完全的网络开发人员noob，不知怎的，我已被指派写一些有角度的产生这些报告，即使我不知道我在做什么（基本上我的雇主想看看他们是否可以避免新的雇用，如果他们可以躲开它）。这是我的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

我可以使用以下template.html文件将数据作为JSON返回到页面：

<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>