嵌套表中的表大小相同

Question

我创建了包含未知元素的嵌套表（primeNg 组件），这是我的代码：

    <p-table [value]="topicReports" dataKey="topicName">
    <ng-template pTemplate="header">
        <tr>
            <th class="is-header">Topic / Comment / Author </th>
            <th class="is-header">Points</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-topic>
        <tr >
            <td>{{topic.name}}</td>
            <td >{{topic.point}}</td>
        </tr>
        <td colspan="2">
            <p-table *ngIf="topic.commentReports" [value]="topic.commentReports" dataKey="commentName">
                <ng-template pTemplate="body" let-comment>
                    <tr clas="background-color">
                        <td class="pl-4">{{comment.name}}</td>
                        <td >{{comment.point}}</td>
                    </tr>
                    <td colspan="2">
                        <p-table *ngIf="comment.authorReports" [value]="comment.authorReports" dataKey="authorName">
                            <ng-template pTemplate="body" let-author>
                                <tr *ngIf="author.point > 0" >
                                    <td class="pl-5">{{author.name}}</td>
                                    <td >{{author.point}}</td>
                                </tr>
                            </ng-template>
                        </p-table>
                    </td>
                </ng-template>
            </p-table>
        </td>
    </ng-template>
    <ng-template pTemplate="summary">
        <div style="text-align: right">
            Summary points: {{summaryPoints}}
        </div>
    </ng-template>
</p-table>

现在的样子是这样的：

如图所示，嵌套子表的大小比父表小。 我尝试做的可能是创建某种 CSS 以使它们具有相同的响应大小。

在与@LGSon 讨论后，我将提供尽可能多的文本代码。 但在我开始之前我需要告诉你，我使用了PrimeNg table component，这意味着如果没有PrimeNg installation，你可能无法运行这个示例

所以我更新了我的 html 文件（通过删除所有不重要的部分）

这是我的.ts 文件：

export class TopicComponent implements OnInit {

  testCustomerReports: TopicReport[] = [];
  testCommentReports: CommentReport[] = [];
  testAuthorReports: AuthorReport[] = [];
  summaryPoints: number;

  constructor() { }

  ngOnInit() {
    this.summaryPoints = 22;
    this.testAuthorReports = [new AuthorReport("Test topic", 22)];
    this.testCommentReports = [new CommentReport("Test comment", 22, this.testAuthorReports)];
    this.customerReports = [new TopicReport("Test author", 22, this.testCommentReports)];
  }
}

这些是我的对象：

import { CommentReport } from "./comment-report";

export class AuthorReport {
  constructor(
    public name: string,
    public points: number,
    public CommentReports: CommentReport[]
  ) {  }
}

import { AuthorReport } from "./author-report";

export class CommentReport {
  constructor(
    public name: string,
    public points: number,
    public authorReports: AuthorReport[]
  ) {  }
}

export class AuthorReport {
  constructor(
    public name: string,
    public points: number
  ) {  }
}

我的 CSS 文件是清晰的（完全清晰，里面什么都没有，因为所有 css 可能都是 p-table 组件中的 build-in 来自 PrimeNg。

我需要说，我也尝试通过我的网络浏览器进行检查，但我没有发现任何可以指向任何填充属性的东西，但我不确定我是否做对了。 我按下了元素，而不是检查，我正在寻找类似于样式视图中的填充的东西，但没有找到任何东西。这就是我在那里找到的：

2018 年 11 月 28 日更新：

@Kosh Very 在他的回答中建议的更改使表格如下所示：

现在表中表中有一个可见表，我只是想让我的嵌套表成为我的第一个表中的一行（就像我的第一个示例一样，但没有这个缩进）。

@Kosh Very 发表评论后的第二次更新。

为什么要使用嵌套表？

（我不知道你是否需要知道，但我不知道一个表中有多少个主题，我不知道有多少个cmet有单个主题，有多少个cmet有单个评论）。

我试图在没有嵌套表的情况下这样做：

<div *ngIf="tableGenerated">
    <div class="pt-4">
        <p-table [value]="topicReports" dataKey="topicName">
            <ng-template pTemplate="header">
                <tr>
                    <th class="is-header"> topic / comment / author</th>
                    <th class="is-header"> points</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-topic>
                <tr class="background-color">
                    <td>{{topic.name}}</td>
                    <td class="is-number">{{topic.point}}</td>
                </tr>
                <tr class="background-color">
                    <td>{{topic.commentReports.name}}</td>
                    <td class="is-number">{{topic.commentReports.point}}</td>
                </tr>
                <tr class="background-color">
                    <td>{{topic.commentReports.authorReports.name}}</td>
                    <td class="is-number">{{topic.commentReports.authorReports.point}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

但我似乎无法执行以下操作：topic.commentReports.authorReports.point 这就是我制作嵌套表的原因。

Answer 1

您的模板代码不正确：
HTML表格单元格<td>需要放入行<tr>，但是你漏掉了一些。

另外，您不能将<div> 直接放入<table>。
所以需要先将其包裹成一个单元格，再将单元格包裹成一行，再将该行放入表格中。

@degath 找到的最终解决方案：

<p-table [value]="topicReports" dataKey="topicName">
  <ng-template pTemplate="header">
    <tr>
      <th>task / comment / author</th>
      <th>points </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-topic>
    <tr class="background-color">
      <td>{{topic.name}}</td>
      <td class="is-number">{{topic.workedHour}}</td>
    </tr>
    <ng-template ngFor let-comment [ngForOf]="topic.commentReports">
      <tr class="background-color">
        <td class="pl-4">{{comment.name}}</td>
        <td class="is-number">{{comment.workedHour}}</td>
      </tr>
      <ng-template ngFor let-author [ngForOf]="comment.authorReports">
        <tr class="background-color">
          <td class="pl-4">{{author.name}}</td>
          <td class="is-number">{{author.workedHour}}</td>
        </tr>
      </ng-template>
    </ng-template>
  </ng-template>
</p-table>