Angular 角度5拉维分页

在Angular5和laravel5项目中，我面临分页问题。我的jSON值如下所示：

{
    "products": {
        "current_page": 1,
        "data": [
            {
                "id": 1,
                "product_name": "Ibrahim Gleichner1",
                "description": "She had quite a crowd of little animals and birds waiting outside. The poor little thing grunted in reply (it had left off writing on his spectacles. 'Where shall I begin, please your Majesty,' said..",
                "rating": 6.51,
                "price": 9.6,
                "uploaded_image": "image_1523531498.png",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-04-12 11:11:38"
            },
            {
                "id": 2,
                "product_name": "Miles Rempel",
                "description": "This was not going to do that,' said the Hatter. He had been jumping about like that!' said Alice in a hoarse, feeble voice: 'I heard the Rabbit say, 'A barrowful of WHAT?' thought Alice to herself.",
                "rating": 2,
                "price": 8.7,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-03-22 05:34:39"
            },
            {
                "id": 3,
                "product_name": "Dr. Maida Mills Jr.",
                "description": "Alice, rather alarmed at the bottom of a tree a few minutes that she was terribly frightened all the children she knew that were of the jurymen. 'It isn't a bird,' Alice remarked. 'Oh, you foolish.",
                "rating": 3,
                "price": 7.6,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-03-22 05:34:39"
            },
            {
                "id": 4,
                "product_name": "Brandi Yost",
                "description": "Alice said very politely, 'if I had not gone far before they saw the Mock Turtle to the conclusion that it was just possible it had VERY long claws and a fan! Quick, now!' And Alice was very likely.",
                "rating": 0,
                "price": 60.3,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-03-22 05:34:39"
            },
            {
                "id": 5,
                "product_name": "Syble Schinner PhD",
                "description": "English!' said the Duchess: you'd better leave off,' said the Cat. 'I said pig,' replied Alice; 'and I do so like that curious song about the reason they're called lessons,' the Gryphon went on.",
                "rating": 7,
                "price": 97.6,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-03-22 05:34:39"
            }
        ],
        "first_page_url": "http://localhost:8000/api/product?page=1",
        "from": 1,
        "last_page": 3,
        "last_page_url": "http://localhost:8000/api/product?page=3",
        "next_page_url": "http://localhost:8000/api/product?page=2",
        "path": "http://localhost:8000/api/product",
        "per_page": 5,
        "prev_page_url": null,
        "to": 5,
        "total": 15
    }

现在，我想创建一个分页。在product.component.html中，我编写了如下代码：

{{product.product_name}
{{product.description}}

{{product.rating}

购买{产品.价格}
编辑

删除这个
上
下一步

您不能以html格式在以下函数中传递值：

<button (click)="prevPage(prev_page_url)"  >Prev</button>
<button (click)="nextPage(next_page_url)" >Next</button> 

Prev
下一个

---

如果输入的是

this.data

值，那么为什么要使用

this.prev\u page\u url

和

this.next\u page\u url

例如，要获取的Json作为数据存储在组件上，那么下面的代码将适用于您

   nextPage() { 
    this.productService.getURLpage(this.data.next_page_url);
  }

  prevPage() { 
    this.productService.getURLpage(this.data.prev_page_url);
  }

---

如果您在

this.products

变量中分配了

JSON

数据，请尝试下面的代码而不是您的代码

nextPage() {
    console.log(this.products.prev_page_url);
    this.productService.getURLpage(this.products.next_page_url);
  }

prevPage() { 
    console.log(this.products.prev_page_url);
    this.productService.getURLpage(this.products.prev_page_url);
  }

---

你如何回答这个不清楚的问题？而且

nextPage（this.data）

是错误的。是否

此

关键字在方法参数中可用？？？

如果它出现在这个.data值中，那么为什么要使用这个.prev\u页面\u url和这个.next\u页面\u url进行访问

。嗯!！但是有什么用呢？您应该在button方法和ts文件中传递object products.next_page_url的值：nextPage（next_page_url:any）{this.productService.getURLpage（next_page_url）；}，但按钮在表的外部。所以我们不能传递

ngfor

对象。整个对象的变量名是什么？你能给你看看ngfor循环html编码吗？我知道

nextPage

和

prevPage

方法的确切功能吗？@RameshRajendran nextPage和prevPage会像点击下一步按钮一样进行分页，它将显示下一组数据，反之亦然。你能提供完整的

ng repeat

code吗？@RameshRajendran我已经更新了我的问题。请检查是否还需要其他内容。对于角度5，您应该使用ngx分页“”，只需要4个参数（total=“total Records”，“limit”：=“20或其他”、“index”=0或要显示的位置，data=“show 20 Records”）