Angular 7 - rendering array of components

Question

I'm having some trouble understanding why I cant get my components to render. I have an array of strings that I would like to render has table head components. However, when it is just rendering the whole array.

Here is my code:

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

I would like them to render in a top-level table component.

It is an array of objects, with the value of headers being an array of the keys of those objects — ncubed
– ncubed, Commented Feb 10, 2019 at 22:50
you have decorated key and value with an Input decorator. What did you pass to the component when you called it? — Dusan Radovanovic
– Dusan Radovanovic, Commented Feb 10, 2019 at 22:56
Can you try adding the markup <pre>{{ headers | json}}</pre>? It will render the headers object to the page so that you can 'see' what's in it. Please post back here if you're still having trouble. — Liam Fleming
– Liam Fleming, Commented Feb 10, 2019 at 23:56

Vladimir Prudnikov · Accepted Answer · 2019-02-10 23:57:40Z

1

Your this.headers will be array of arrays, when you loop over it you get whole array of headers from each object rendered.

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

You need to flatten your array headers.flat().

answered Feb 10, 2019 at 23:57

Vladimir Prudnikov

7,3124 gold badges53 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 7 - rendering array of components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related