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可能都是build-in中p-table组件中的PrimeNg。

我要说的是，我也尝试通过Web浏览器进行检查，但是我没有发现任何可能指向任何padding属性的内容，但是我不确定我是否做对了。我在元素上按了右键，然后进行检查，然后在样式视图中搜索类似于填充的内容，但未找到任何内容。这就是我在那找到的：

更新28.11.2018：

@Kosh Very建议的更改使他的表格看起来像这样：

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

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

为什么要使用嵌套表？

（我不确定您是否需要知道，但是我不知道一个表中有多少个主题，也不知道有多少个注释具有单个主题，以及有多少个注释具有单个注释）。 / p>

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

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

嵌套表中的表大小相同

1 个答案: