[英]How do I return JSON data as a table in my template.html file in angular
我是一个Web开发人员,总的来说,即使我不知道自己在做什么,我还是被分配去编写一些角度来生成这些报告(基本上,我的雇主想知道他们是否可以避免聘请新员工)躲开它)。 这是我的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>
如何将数据返回表中的屏幕?
我做了几次尝试,做了一些循环,但没有成功。
您需要使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.