當我嘗試在 Angular 中顯示我的 subData 時，我得到[object Object]： 在此處輸入影像描述
我有一個可以包含一系列站點的模型：
public class Site
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Url { get; set; } = string.Empty;
public Site[]? SubData { get; set; }
}
JSON 示例：
{
"id": 1,
"name": "Google",
"url": "http://www.google.com",
"subData": [
{
"id": 2,
"name": "Walla",
"url": "http://www.walla.co.il"
}
]
},
組件.ts：
export class AppComponent implements OnInit{
sites: Site[] = [];
constructor(private siteService:SiteService) { }
ngOnInit(): void {
this.GetSites();
}
GetSites() {
this.siteService.GetSites()
.subscribe((sites) => {
JSON.stringify(this.sites = sites);
});
}
}
html:
<div *ngFor="let item of sites;">
<div>Id: {{item.id}}</div>
<div>Site Name: {{item.name}}</div>
<div>Site Url: <a href="{{item.url}}">{{item.url}}</a></div>
<div>{{item.subData}}</div>
</div>
uj5u.com熱心網友回復：
您可以使用異步管道使其更清潔：
<div *ngFor="let item of sites$ | async as site;"> // use async pipe here
<div>Id: {{site.id}}</div>
<div>Site Name: {{site.name}}</div>
<div>Site Url: <a href="{{site.url}}">{{site.url}}</a></div>
// use ngfor for subdata
<div *ngFor="let subSite of site?.subData"> // use ? for safety
<div> {{subSite?.url}}</div>
</div>
</div>
export class AppComponent implements OnInit{
sites$: Observable<Site[]>;
constructor(private siteService:SiteService) { }
ngOnInit(): void {
this.GetSites();
}
GetSites() {
this.sites$ = this.siteService.GetSites();
}
}
uj5u.com熱心網友回復：
使用json管道之類的
<div>{{item.subData | json}}</div>
根據評論更新以顯示為 html 元素使用ngFor回圈
<div *ngFor="let i of item.subData">
<div> {{i.url}}</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/513974.html
標籤：json有角度的目的asp.net-web-api网页API
上一篇：如何從JSON中獲取資訊？