英文:
NgFor with variable keys?
问题
'Headers'（headers: any;）是从'data.items[0]'中使用'Object.keys'提取的键。
我应该如何循环遍历'data.items'对象。如果我尝试使用*ngfor进行循环遍历，它不起作用。
这是我想要的结果。
但是当我使用'item.header'时出现错误，
> 属性'header'在类型'{ name: string; alias:
> string[]; qty: number; price: number; total: number; }上不存在
如果我尝试'item[header]'，
> 因为类型为'any'的表达式不能用于索引类型'{ name: string; alias: string[]; qty: number; price: number; total: number; }，所以元素隐式具有'any'类型
代码
对象
private itemData: sale = {
type: '',
data: { date: ' ', InvoiceNo: ' ', tax: ' ' },
total: { semitotal: 0, grandtotal: 0 },
items: [
{ name: 'item 1', alias: ['01a'], qty: 0, price: 0, total: 0 },
{ name: 'item 2', alias: ['02a'], qty: 5, price: 250, total: 0 },
{ name: 'item 3', alias: ['03a'], qty: 6, price: 350, total: 0 },
{ name: 'item 4', alias: ['04a'], qty: 1, price: 150, total: 0 },
],
params: {},
};
Angular HTML 代码
<tbody>
<tr *ngFor="let item of itemData.items" class="table-data" >
<td *ngFor="let header of headers">
<input type="text" [value]="item.header"> <---------- 问题
</td>
</tr>
</tbody>
英文:
'Headers' (headers: any;) are keys extracted from'data.items[0]' using 'object.keys'.
How should i loop through 'data.items' objects. It doesn't work if i try to loop though with *ngfor
this is the result i want.
But i am getting error when i use 'item.header',
> Property 'header' does not exist on type '{ name: string; alias:
> string[]; qty: number; price: number; total: number; }
if i try 'item[header]'
> Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ name: string; alias: string[]; qty: number; price: number; total: number; }
CODE
Object
private itemData: sale = {
type: '',
data: { date: ' ', InvoiceNo: ' ', tax: ' ' },
total: { semitotal: 0, grandtotal: 0 },
items: [
{ name: 'item 1', alias: ['01a'], qty: 0, price: 0, total: 0 },
{ name: 'item 2', alias: ['02a'], qty: 5, price: 250, total: 0 },
{ name: 'item 3', alias: ['03a'], qty: 6, price: 350, total: 0 },
{ name: 'item 4', alias: ['04a'], qty: 1, price: 150, total: 0 },
],
params: {},
};
Angular HTML Code
<tbody>
<tr *ngFor="let item of itemData.items" class="table-data" >
<td *ngFor="let header of headers">
<input type="text" [value]="item.header"> <---------- Problem
</td>
</tr>
</tbody>
答案1
得分: 2
You can create a type for the keys of an individual item and use that to index on an individual item:
type SaleTableHeader = "name" | "qty" | "alias" | "price" | "total";
// Component class
headers: SaleTableHeader[] = Object.keys(this.itemData.items[0]) as SaleTableHeader[];
// Component Template
<tbody>
<tr *ngFor="let item of itemData.items" class="table-data">
<td *ngFor="let header of headers">
<input type="text" [value]="item[header]" />
</td>
</tr>
</tbody>
英文:
You can create a type for the keys of an individual item and use that to index on an individual item:
type SaleTableHeader = "name" | "qty" | "alias" | "price" | "total";
// Component class
headers: SaleTableHeader[] = Object.keys(this.itemData.items[0]) as SaleTableHeader[];
// Component Template
<tbody>
<tr *ngFor="let item of itemData.items" class="table-data">
<td *ngFor="let header of headers">
<input type="text" [value]="item[header]" />
</td>
</tr>
</tbody>
答案2
得分: 1
<tbody>
<table class="table">
<th *ngFor="let header of itemData.items[0] | keyvalue" class="table-data">
{{header.key}}
</th>
<tr *ngFor="let item of itemData.items" class="table-data" >
<td *ngFor="let r of item | keyvalue">
<input type="text"[value]="r.value">
</td>
</tr>
</table>
</tbody>
英文:
you could do this:
html
<tbody>
<table class="table">
<th *ngFor="let header of itemData.items[0] | keyvalue" class="table-data">
{{header.key}}
</th>
<tr *ngFor="let item of itemData.items" class="table-data" >
<td *ngFor="let r of item | keyvalue">
<input type="text"[value]="r.value">
</td>
</tr>
</table>
</tbody>
Output
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论