Question

通过此功能，我从ws中获取了所有数据。

 public data: Data[];
    getall() {
        this.ws.getalldata().subscribe(
            data=> {
                this.data= data;
            }
        );
    }

Json文件：

 {
        "StatusCode": 0,
        "StatusMessage": "OK",
        "StatusDescription": [
            {
                "id": "1",
                "id_type": 1,
                "desc": "TRTY",
                "active": 0,
                },
              ....
             {
                "id": "3",
                "id_type": 50,
                "desc": "qqq",
                "active": 0,
            },
            {
                "id": "4",
                "id_type": 50,
                "desc": "qqq",
                "active": 0,
            },
               ......
           {
                "id": "30",
                "id_type": 2,
                "desc": "hhh",
                "active": 0,
            }
          }

我可以像使用此代码时那样以html格式显示这些数据：

  <StackLayout *ngFor="let item of data">                
        <Label row="1" col="1" text="" class="list-group-item-text" [text]='item.id_type'></Label>
        <Label row="1" col="1" text="" class="list-group-item-text" [text]='item.desc'></Label>
     </StackLayout>

我的问题是，如何在模板中仅显示5个热门数据？我只想显示5个顶部元素，而不是全部。

Answer 1

Following RxJs documentation，如果要处理最后5个项目，则应执行以下操作（RxJs 6）：

import { concatAll, takeLast } from 'rxjs/operators';

public data: Data[] = [];
...

    this.ws.getalldata().pipe(concatAll(), takeLast(5)).subscribe(
        item=> {
            this.data.push(item);
        }
    );

另一种解决方案是在数组本身上工作，

    this.ws.getalldata().subscribe(
        data=> {
            this.data = data.slice(-5)
        }
    );

在Nativescript中使用订阅时如何显示5个顶级数据

1 个答案: