Pfthb

I have following html code:
Can some tell How can I fix this table in a proper way so that all headers should align with table data

<div class="article-list container">
<table cellpadding="5px" cellspacing="5px" border="1" bgcolor="lightgreen">
<tbody>
<tr>
 <th>User Id</th>
 <th>Title</th>
 <th>Body</th>
 <th>Author</th>
 <th>Editor</th>
 <th>Created Date</th>
 <th>Actions</th>
</tr>

<tr *ngFor="let items of article_array_keys" class="structure">
 <p *ngFor="let item of items">
 <td><h5> item.id </h5></td>
 <td><h5> item.title </h5></td>
 <td><h5> item.body </h5></td>
 <td><h5> item.author </h5></td>
 <td><h5> item.editor </h5></td>
 <td><h5> item.created_at </h5></td>
 </p>
</tr>
</tbody>

and this is the api data from backend:

["id":8,"title":"Hello data updated even now","body":"Ducimus et repellendus eveniet ab nihil labore. Autem in nulla vel rerum sit ut omnis. Nulla est sunt minus. Dolores sapiente totam consequuntur omnis officiis voluptas ut.","author":"Velda Lemke","editor":"Sadie Schmidt IV","active":1,"created_at":"2018-09-04 11:27:22","updated_at":"2018-11-06 10:31:11"]

I am using this code in subscribing service in the component:

this.serv_article_list.getFullArticleList(this.article_resource['request_type'], this.article_resource)
 .subscribe(
 (article_list_data: any) => 
 console.log(article_list_data);
 this.article_array_keys = Array.of(article_list_data);//Object.keys(article_list_data)
 // this.article_array_values = Object.values(article_list_data)
 );

Can some tell How can I fix this table in a proper way so that all headers should align with table data

note: Whenever I use an extra tag such as div or ```span`` inside/outside a tag it is disturbing the table.
may I be not sure how really a table works with other tags embedded? but they work fine with static HTML code.

SS is attached showing improper formatted table

I want to achive in this way:

this is the code access github link:
https://github.com/ROHAN-TANDEL/ng7

It would appear as though your table is being malformed because each table row is only being given one child element

Change your HTML to

<tr *ngFor="let items of article_array_keys" class="structure">
 <ng-container *ngFor="let item of items">
 <td><h5> item.id </h5></td>
 <td><h5> item.title </h5></td>
 <td><h5> item.body </h5></td>
 <td><h5> item.author </h5></td>
 <td><h5> item.editor </h5></td>
 <td><h5> item.created_at </h5></td>
 </ng-container>
</tr>

There are gaps in the code you provided but judging from the json you pasted, the data is an array while in your template, you are making two ngFor as if you had an array of arrays.

Just set the article_list_data to a property on your component and iterate over it:

<tr *ngFor="let item of article_list_data" class="structure">
 <td><h5> item.id </h5></td>
 <td><h5> item.title </h5></td>
 <td><h5> item.body </h5></td>
 <td><h5> item.author </h5></td>
 <td><h5> item.editor </h5></td>
 <td><h5> item.created_at </h5></td>
</tr>

Edit: To display the content of article_list_data as available inside the HTML template, use <pre> json </pre>.

Judging from your code, Array.Of(x) creates an array with a first value x. So you end up with an [[...]] which is the reason why you need a nested ngFor.

Remove the Array.of:

this.serv...getFullArticleList(...)
 .subscribe((article_list_data: any) => 
 this.article_list_data = article_list_data;
 );

Then directly use it.

Try like this

<ng-container *ngFor="let items of article_array_keys" class="structure">
 <tr *ngFor="let item of items">
 <td><h5> item.id </h5></td>
 <td><h5> item.title </h5></td>
 <td><h5> item.body </h5></td>
 <td><h5> item.author </h5></td>
 <td><h5> item.editor </h5></td>
 <td><h5> item.created_at </h5></td>
 </tr>
</ng-container>

Hope this works - happy coding!!