angular - 以角度 4 在网格中显示 json 数组数据
问题描述
我想在来自服务的 html 中显示我的数据。
下面是我的component.ts代码
url:string="http://localhost:63563/Api/user/GetCheckBoxes";
ErrorMessage : boolean = false;
userdata(){
this.http.get(this.url).subscribe((res)=>{
this.arrBirds = res.json() as Application[];
console.log(this.arrBirds)
});
}
我从服务中得到的响应如下
"Table": [
{
"intUserId": 1109,
"vcrFirstName": "sdvlbs",
"vcrLastName": "dsbvsdfn",
"vcrLoginName": "!@#DBASDI?\"|}",
"vcrPassword": "twst#123",
"vcrStatus": "InActive",
"vcrIsClient": "eClerx",
"vcrEmail": "sdvlbs.dsbvsdfn@test.com",
"vcrRole": "Analyst,Auditor,Team Lead,Manager",
"Agreements_Selected": "ISDA,CSA,Repo,SLA,PBA"
},
{
"intUserId": 1121,
"vcrFirstName": "(*&&)!",
"vcrLastName": "@%52",
"vcrLoginName": "!E@DFWFG#^^^#TGE&^$",
"vcrPassword": "test#123",
"vcrStatus": "InActive",
"vcrIsClient": "eClerx",
"vcrEmail": "saasdasdmple.user@test.com",
"vcrRole": "Analyst",
"Agreements_Selected": "ISDA"
}
]
}
下面是我从服务中获得的用于呈现数据的 HTML 代码。
<table cellpadding="0" width="100%" cellspacing="0" border="0" class="search_grid_view table-striped">
<thead>
<tr>
<th style="min-width: 100px;">Login Name</th>
<th>First Name</th>
<th>Last Name</th>
<th>Role</th>
<!-- <th>Agreement Type</th>
<th>Status</th>
<th>User Type</th>
<th>Email</th>
<th>Action</th> -->
<!-- <th *ngFor="let col of getColumns">
{{col}}
</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let char of arrBirds">
<td >
{{char.vcrFirstName}}
</td>
<td >
{{char.vcrLastName}}
</td>
<td >
{{char.vcrLoginName}}
</td>
<td >
{{char.vcrPassword}}
</td>
</tr>
</tbody>
</table>
我得到的错误如下。
ERROR Error: Error trying to diff '{
"Table": [
{
"intUserId": 1109,
"vcrFirstName": "sdvlbs",
"vcrLastName": "dsbvsdfn",
"vcrLoginName": "!@#DBASDI?\"|}",
"vcrPassword": "eclerx#123",
"vcrStatus": "InActive",
"vcrIsClient": "eClerx",
"vcrEmail": "sdvlbs.dsbvsdfn@eClerx.com",
"vcrRole": "Analyst,Auditor,Team Lead,Manager",
"Agreements_Selected": "ISDA,CSA,Repo,SLA,PBA"
},
{
"intUserId": 1121,
"vcrFirstName": "(*&&)!",
"vcrLastName": "@%52",
"vcrLoginName": "!E@DFWFG#^^^#TGE&^$",
"vcrPassword": "eclerx#123",
"vcrStatus": "InActive",
"vcrIsClient": "eClerx",
"vcrEmail": "saasdasdmple.user@eclerx.com",
"vcrRole": "Analyst",
"Agreements_Selected": "ISDA"
}
]
}'. Only arrays and iterables are allowed
at DefaultIterableDiffer.push../node_modules/@angular/core/fesm5/core.js.DefaultIterableDiffer.diff (core.js:5528)
at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3134)
at checkAndUpdateDirectiveInline (core.js:9038)
at checkAndUpdateNodeInline (core.js:10299)
at checkAndUpdateNode (core.js:10261)
at debugCheckAndUpdateNode (core.js:10894)
at debugCheckDirectivesFn (core.js:10854)
at Object.eval [as updateDirectives] (UsergridComponent.html:42)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:10846)
at checkAndUpdateView (core.js:10243)
有人可以帮助我如何在我的网格中显示数据。
2天以来我一直在挣扎。
解决方案
推荐阅读
- kdb - 用空值替换无穷大,然后使用填充 q kdb 填充它们
- angular - RXJS 服务 http 调用在另一个调用后返回 null
- c - 如果浮点常量隐式转换为 int 类型,什么时候会溢出
- regex - 在不使用环视的情况下匹配两组字符之间的字符串
- windows - 将 ping 结果保存到 TXT 文件
- c# - 如何使用 EF 和依赖注入在具有相同架构但不同名称的数据库之间进行更改?
- xml - 是否可以使用 Groovy 脚本将“<”和“>”字符直接注入 SoapUI 请求 XML?
- python - 连接两个刺列 - python
- pandas - 使用groupby后如何过滤对象?
- java - 如何优化正则表达式模式?