[英]Displaying keys and values from a list of object in angular typescript
In my angular app, I have a list of objects that I get dynamically from an API that looks for example like this:在我的 angular 应用程序中,我有一个从 API 动态获取的对象列表,例如:
[
{
"_id": "some id",
"DATE": "2021/01/08",
"COUNT": "23",
"AMOUNT": "268710"
},
{
"_id": "some id",
"DATE": "2021/09/18",
"COUNT": "2",
"AMOUNT": "1,167.73"
}
]
I want to be able to access the key and values of each object without mentioning them explicitly, this way if I get a list with more objects or different keys I would be able to display them as well, How can I do that?我希望能够在不明确提及的情况下访问每个 object 的键和值,这样如果我得到一个包含更多对象或不同键的列表,我也可以显示它们,我该怎么做?
<tr
*ngFor="
let row of FilteredMatchTransactions
| paginate
: { itemsPerPage: itemsPerPage, currentPage: p };
let i = index
"
>
<td>
{{ KeysFilteredMatchTransactions[1] }} :
{{ row.DATE}}
</td>
<td>
{{ KeysFilteredMatchTransactions[2] }} : {{ row.COUNT}}
</td>
<td>
{{ KeysFilteredMatchTransactions[3] }} :
{{ row.AMOUNT}}
</td>
</tr>
TS: TS:
ngOnInit(): void {
const Param = this.route.snapshot.queryParamMap.get('_id');
this._crudService.GetReportById(Param).subscribe((res) => {
this.MatchTransactions = res;
this.FilteredMatchTransactions = this.MatchTransactions.onlyInFile1;
this.KeysFilteredMatchTransactions = Object.keys(
this.FilteredMatchTransactions[0]
);
console.log(this.KeysFilteredMatchTransactions);
});
You could use the Angular keyvalue
pipe to traverse each property of the object. Try the following您可以使用 Angular 键值
keyvalue
遍历 object 的每个属性。尝试以下操作
Controller (*.ts) Controller (*.ts)
ngOnInit(): void {
const Param = this.route.snapshot.queryParamMap.get('_id');
this._crudService.GetReportById(Param).subscribe((res) => {
this.MatchTransactions = res;
this.FilteredMatchTransactions = this.MatchTransactions.onlyInFile1;
});
}
Template (*.html)模板 (*.html)
<tr
*ngFor="let row of FilteredMatchTransactions |
paginate : { itemsPerPage: itemsPerPage, currentPage: p };
let i = index"
>
<ng-container *ngFor="let transaction of row | keyvalue">
<td *ngIf="transaction.key !== '_id'">
{{ transaction.key }} : {{ transaction.value }}
</td>
</ng-container>
</tr>
Update :更新:
FilteredMatchTransactions
-> row
in 2 nd *ngFor
. FilteredMatchTransactions
->第二row
*ngFor
。*ngIf
check for key !== '_id'
. *ngIf
检查key !== '_id'
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.