时间戳

首页 > 解决方案 > Angular 7 - 渲染组件数组

angular - Angular 7 - 渲染组件数组

问题描述

我在理解为什么我不能让我的组件渲染时遇到了一些麻烦。我有一个字符串数组，我想渲染有表头组件。但是，当它只是渲染整个数组时。

这是我的代码：

@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>

我希望他们在顶级表格组件中呈现。

标签： angular

解决方案

您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()。

推荐阅读