如何在 angular 中 template.html 文件中 return JSON 数据作为 table

Question

我是一个彻头彻尾的网络开发新手，不知何故我被分配去写一些 angular 来生成这些报告，尽管我不知道我在做什么（基本上我的雇主想看看他们是否如果他们可以避免，可以避免雇用新员工）。这是我的 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

我可以 return 使用以下 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>

如何return将数据显示在table中？

我做了几次尝试并做了一些循环，但没有成功。

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>

如何在 angular 中 template.html 文件中 return JSON 数据作为 table

How do I return JSON data as a table in my template.html file in angular

.net

web

angular2-template

angular