Может кто-нибудь помочь, как решить эту проблему?

Question

У меня есть следующий HTML-код: Могут ли некоторые сказать, как правильно исправить эту таблицу, чтобы все заголовки были выровнены с данными таблицы

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

и это данные API от бэкэнда:

[{"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"}]

Я использую этот код при подписке на сервис в компоненте:

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)
    });

Кто-нибудь может сказать, Как правильно исправить эту таблицу, чтобы все заголовки были выровнены с данными таблицы

примечание: всякий раз, когда я использую дополнительный тег, такой как div или `` `span`` внутри / снаружи тега, это мешает работе таблицы. Могу ли я быть не уверен, как на самом деле таблица работает с другими тегами? но они отлично работают со статическим HTML-кодом.

SS прилагается с неверно отформатированной таблицей

Я хочу достичь таким образом:

это ссылка на код доступа github: https://github.com/ROHAN-TANDEL/ng7

Answer 1

Может показаться, что ваша таблица искажена, потому что каждой строке таблицы присваивается только один дочерний элемент

Измените ваш HTML на

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

Answer 2

Попробуйте вот так

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

Надеюсь, что это работает - счастливое кодирование !!

Answer 3

В предоставленном вами коде есть пробелы, но, судя по вставленному вами json, данные представляют собой массив, а в вашем шаблоне вы создаете два ngFor, как если бы у вас был массив массивов.

Просто установите article_list_data для свойства вашего компонента и выполните итерации по нему:

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

Редактировать : чтобы отобразить содержимое article_list_data как доступное внутри шаблона HTML,используйте {{ article_list_data | json }}.

Судя по вашему коду, Array.Of(x) создает массив с первым значением x.Таким образом, вы получите [[{...}]], который является причиной, по которой вам нужен вложенный ngFor.

Удалите Array.of:

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

Затем используйте его напрямую.