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

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

您提供的代码中存在空白，但从您粘贴的 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 3

这样试试

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

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