如何在 angular 2 中对 table 的记录添加限制

Question

这是 html，其中 table 结构是在辅助组件的帮助下创建的。在 BookingRow 选择器中，rowData 用作属性，在预订我正在获取预订清单。所以它显示了 10 条记录。我只想显示 5 条记录，所以如何在 angular 中执行此操作 2.

<div>
    <div>
        <h3>Today's Bookings</h3>
    <div>
        <table width="100%">
            <thead BookingHeadings type="provider"></thead>
            <tbody BookingRow pageType="provider dashboard" [rowData]="Bookings" pricingColumnStatus=false></tbody>      
      </table>
      <div><a [routerLink]="['/provider/bookings/todays']">
        <button type="button" value="View all">View All</button></a>
      </div>

</div>

Answer 1

我猜你的 [rowData]=“Bookings“ 是一个数组。我还猜测您是从某种 http 服务获得预订的。所以你可以在 Success 回调中对数组进行切片。

var onlyFiveBookings=Bookings.slice(0,5); // for the first five.

我认为更好的方法是在服务器端更改它，以便响应仅包含 5 个预订。

如何在 angular 2 中对 table 的记录添加限制

How to add limit on records of table in angular 2

angular2-directives