有人可以帮助解决这个问题吗？

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

您提供的代码中存在间隙，但是从粘贴的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>

编辑：要显示HTML模板中article_list_data的内容，请使用<pre>{{ article_list_data | json }}</pre>。

从您的代码来看，Array.Of(x)创建一个数组，其第一个值为x。因此，您最终得到了[[{...}]]，这就是为什么您需要嵌套的ngFor的原因。

删除Array.of：

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

然后直接使用它。

Answer 2

由于每个表行仅被赋予一个子元素，因此您的表似乎格式不正确

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

尝试这样

def get_initial(self):
    return {'estudante': Estudante.objects.get(id=self.kwargs['pk'])}

希望这行得通-编码愉快！！