ANgular- 是否可以在常规 table 中添加 Mat-Paginator？

Question

我在angular做了一个正则HTMLtable，数据来自API。我想在其中添加mat-paginator。

这是我的代码：

<table class="table" style="text-align: center;">
<thead class="thead-light">
<tr>
<th></th>
<th style="font-weight: 800;">Points</th>
<th style="font-weight: 800;">Award Name</th>
<th style="font-weight: 800;">Country</th>
<th style="font-weight: 800;">Created At</th>
<th style="font-weight: 800;">Nominator</th>
<th style="font-weight: 800;">Visiblity</th>
<th></th>
</tr>
</thead>
<tbody *ngIf="newUserData">
<tr *ngFor="let data of newUserData; let i = index">
<td>
<div style="padding-left: 1.4rem;">
<input [(ngModel)]="radioSelected" class="form-check-input" type="radio" value="{{data.id}}">
</div>
</td>
<td>{{data.points}}</td>
<td>{{data.reason}}</td>
<td>{{data.countryName}}</td>
<td>{{data.createdAt | date : 'shortDate'}}</td>
<td>{{data.senderName}}</td>
<td>{{data.visibility}}</td>
<td>
<div class="d-flex" (click)="onRevoke(radioSelected)" style="cursor: pointer;" id="revoke" #revoke>
<svg-icon src="../../../../../assets/media/revoke_func.svg" [svgStyle]="{ 'width.px':18, 'height.px':12, 'fill':'#666666' }"></svg-icon>
<p style="color: #EB4987;">Revoke</p>
</div>
</td>
</tr>
</tbody>
</table>

在此先感谢您的帮助

Answer 1

是的，借助 MatTableDataSource、MatPaginator 和 Observable 是可能的。

请查看我创建的以下 stackblitz 示例。

https://stackblitz.com/edit/angular-ivy-fauia1

ANgular- 是否可以在常规 table 中添加 Mat-Paginator？

ANgular- Is it possible to add Mat-Paginator in regular table?

javascript

angular

angular-material

mat-pagination