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

时间:2018-11-12 14:11:11

标签: angular html5

我有以下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,显示格式不正确的表格 enter image description here

我想以这种方式实现:

enter image description here

这是代码访问github链接: https://github.com/ROHAN-TANDEL/ng7

3 个答案:

答案 0 :(得分:0)

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

然后直接使用它。

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

尝试这样

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

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