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>

我希望它们在顶级表组件中呈现

您的this.headers将是数组数组，当您在其上循环时，您将从渲染的每个对象获得整个数组的头

const headers = [];
const value = [{a: 1}, {b: 2}];
value.map((item) => headers.push(Object.keys(item)));
console.log(headers);
// [['a'], ['b']]

---

您需要展平数组标头。展平。

您将什么作为此组件的输入？它是一个对象数组，标头的值是这些对象的键数组。您使用输入装饰器装饰了键和值。调用组件时传递给它的是什么？我删除了我的注释，我没有思考..你能尝试添加标记吗？它会将headers对象呈现给页面，以便您可以“看到”其中的内容。如果你还有问题，请发回这里。