问Angular 7-组件的渲染数组
EN

Stack Overflow用户

提问于 2019-02-11 06:37:36

回答 1查看 774关注 0票数 0

我很难理解为什么我不能让我的组件渲染。我有一个字符串数组，我想呈现具有表头组件的字符串。然而，当它只是渲染整个数组时。

下面是我的代码：

@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

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-11 07:57:40

你的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()。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54621819

复制

相似问题

问Angular 7-组件的渲染数组
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular 7-组件的渲染数组EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular 7-组件的渲染数组
EN