我有以下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代码配合使用。
我想以这种方式实现:
这是代码访问github链接: https://github.com/ROHAN-TANDEL/ng7
答案 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'])}
希望这行得通-编码愉快!!