Question

在使用laravel5项目的Angular5中，我遇到了分页问题。我有以下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中，我编写了如下代码：

＆＃13;

<div class="mt-3 mb-3">
          <div class="col-md-12">
          <div class="font-weight-bold">{{product.product_name}}</div>
          <p>{{product.description}}</p>
          <p>{{product.rating}}</p>
          <div class="pt-2 pb-2 border-top border-bottom">
            <div class="mt-1">
              <span href="#" class="btn btn-primary btn-sm float-left" role="button">BUY</span><span class="float-right pricetext">£{{product.price}}</span>
              <div class="clearfix"><p><a routerLink="../update-product/{{product.id}}" routerLinkActive="active">Edit</a></p></div>
              <div class=""><button (click)="deleteProduct(product.id)">Delete This</button></div>
            </div>
          </div>  
          </div>
      </div>

 <button (click)="prevPage()"  >Prev</button>
 <button (click)="nextPage()" >Next</button>

＆＃13;

我在product.component.ts中创建了所需的函数，如：

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

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

但是在控制台中，我看到下一个或上一页的网址未定义。

Answer 1

您没有在html中传递以下函数中的值：

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

如果它的值为this.data，那么您使用this.prev_page_url和this.next_page_url进行访问的原因

Answer 2

例如Json You fetching作为数据存储在组件中，然后以下代码将为您工作

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

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

Answer 3

如果您在JSON变量中分配了this.products数据，请尝试以下代码而不是您的代码。

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);
  }

Angular 5 Laravel分页

3 个答案: