我在理解为什么无法渲染组件时遇到了一些麻烦。我要渲染的字符串数组具有表头组件。但是,当它只是渲染整个数组时。
这是我的代码:
@Component({
selector: 'app-tableheader',
templateUrl: './tableheader.component.html',
styleUrls: ['./tableheader.component.css']
})
// This should be table header component
export class TableheaderComponent implements OnInit {
@Input() key
@Input() value
headers;
constructor() {}
ngOnInit(){
this.headers = [];
this.value.map((item, index) => this.headers.push(Object.keys(item)));
}
}
----------------
<thead *ngFor="let header of headers">
<th> {{ header }} </th>
</thead>
我希望它们在顶级表组件中呈现。
答案 0 :(得分:1)
您的this.headers
将是一个数组数组,当您对其进行循环时,会从呈现的每个对象中获得整个标头数组。
const headers = [];
const value = [{a: 1}, {b: 2}];
value.map((item) => headers.push(Object.keys(item)));
console.log(headers);
// [['a'], ['b']]
您需要展平数组headers.flat()
。