Я создал вложенные таблицы (компонент 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 , это означает, что вы, вероятно, не сможете запустить этот пример без установки PrimeNg
Итак, я обновилсямой 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.
Я должен сказать, что я также пытался проверить с помощью моего веб-браузера,но я не нашел ничего, что могло бы указывать на какое-либо свойство отступа, но я не уверен, правильно ли я это сделал. Я нажал прямо на элемент, затем осмотрел и искал что-то похожее на заполнение в представлении стиля, но не сделалнашел что-нибудь. и вот что я нашел там:
Обновление 28.11.2018:
Изменения, предложенные @Kosh Очень в своем ответе заставили таблицу выглядеть так:
Теперь в таблице есть видимая таблица, и я просто хотел, чтобы мои вложенные таблицы были строкой в моей первой таблице (как в моем первом примере), но без этого отступа).
Второе обновление после комментария @Kosh Very.
Почему я использую вложенные таблицы?
(I 'Я не уверен, если вам нужно знать, но я не знаю, сколько тем в таблице, и я не знаю, сколько комментариев имеют одну тему, и сколько комментариев имеют один комментарий).
Iпытался сделать это без вложенных таблиц, как:
<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 Вот почему я создал вложенные таблицы.