[英]Trying to loop through object array using ngfor using another header object array to fill a table
I am trying to render an array of objects into a table component inside the collectionsHome Component我正在尝试将对象数组渲染到 collectionsHome 组件内的表组件中
CollectionsHomeComponent:集合主页组件:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-collections-home',
templateUrl: './collections-home.component.html',
styleUrls: ['./collections-home.component.css']
})
export class CollectionsHomeComponent implements OnInit {
data = [
{name: 'James', age: 24, job: 'Designer'},
{name: 'Jill', age: 26, job: 'Engineer'},
{name: 'Elyse', age: 25, job: 'Engineer'}
];
headers=[
{key:'name', label: 'Name'},
{key:'age', label: 'Age'},
{key:'job', label: 'Job'}
]
constructor() { }
ngOnInit(): void {
}
}
TableComponent表格组件
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
@Input() data: {name: string; age: number; job: string}[] = [];
@Input() headers: {key: string; label: string}[] = [];
constructor() { }
ngOnInit(): void {
}
}
CollectionsHomeComponent.html CollectionsHomeComponent.html
<app-divider>Table Component</app-divider>
<app-table [data]="data" [headers]="headers"></app-table>
TableComponent.html TableComponent.html
I am using ngfor to loop through all the objects in the data array using the key from the headers keys我正在使用 ngfor 使用标题键中的键循环遍历数据数组中的所有对象
<table class="ui table">
<thead>
<tr>
<th *ngFor="let header of headers">
{{header.label}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let record of data">
<td *ngFor="let header of headers">
{{record[header.key]}} ---> Throwing Error
</td>
</tr>
</tbody>
</table>
doing this {{record[header.key]}} throws an error and I am not sure why这样做 {{record[header.key]}} 会抛出错误,我不确定为什么
Here is the error:这是错误:
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ name: string; age: number; job: string; }'.
No index signature with a parameter of type 'string' was found on type '{ name: string; age: number; job: string; }'.ngtsc(7053)
table.component.ts(4, 40): Error occurs in the template of component TableComponent.
The only way to get this working is if I change the input types to any like this让这个工作的唯一方法是如果我将输入类型更改为任何这样的
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
@Input() data: any = [];
@Input() headers: any = [];
constructor() { }
ngOnInit(): void {
}
}
Can someone help me understand why?有人可以帮我理解为什么吗? I feel like using any in cases like this is not best practices
我觉得在这种情况下使用 any 不是最佳做法
define the table header and data type like定义表 header 和数据类型
export interface TableDataType {
name: string;
age: number;
job: string;
}
export interface TableHeader {
key: string;
label: string;
}
and use in table component并在表格组件中使用
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
})
export class TableComponent implements OnInit {
@Input() data: Array<TableDataType>[];
@Input() headers: Array<TableHeader> = [];
constructor() {}
ngOnInit(): void {}
}
here is the live working code https://stackblitz.com/edit/angular-2khgqx?file=src/app/table-demo/table.component.ts这是实时工作代码https://stackblitz.com/edit/angular-2khgqx?file=src/app/table-demo/table.component.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.