Question

我做了一个分页来更改页面的功能：

onClick(number) {
    this.CustomersData.page(number);
    this.customers = this.CustomersData.customer;
    console.log(this.customers);
    console.log(this.CustomersData.customer);
}

这是我在onClick中调用的函数：

page(number) {
  this.http.get('http://127.0.0.1:8000/api/customers?page=' + (number), {headers: new HttpHeaders().set('Authorization',
      this.token.t)}).subscribe(r => {
      this.customer  = r;
      console.log(this.customer);
    });
}

在这里我在模板中调用onClick函数进行分页：

<ul class="pagination-custom text-right">
    <li class="pag-link"><a (click)="onClick(customers.meta.pagination.current_page - 1)"><i class="fa fa-angle-double-left"></i></a></li>
    <li class="pag-link" *ngFor="let item of createRange(customers.meta.pagination.per_page); let i = index"
        >
      <a (click)="onClick(i)">{{i}}</a></li>
  <li class="pag-link"><a (click)="onClick(customers.meta.pagination.current_page + 1)"><i class="fa fa-angle-double-right"></i></a></li>
</ul>

这是循环：

createRange(number) {
    const items: number[] = [];
    for (let i = 0; i < number; i++) {
      items.push(i);
    }
    return items;
  }

问题是我必须单击两次才能移动到另一页。


另一个问题是，在我的控制台中显示，在第一个函数中调用该对象时，对象没有任何变化，而在第三个控制台中，该数组显示了必须用于函数page（）中的页面的数组。     如果我理解正确，则必须向第一个控制台显示从函数page（）中调用的内容。

Answer 1

this.customers = this.CustomersData.customer;中的onClick()并不等待服务内部的预订来设置this.CustomersData.customer的值，因此，总是在实际数据获取之后单击鼠标。

以下是一些可能的修复程序：

行为主体

如果要保持结构不变，建议您查看BehaviorSubject。我创建了一个Stackblitz example来显示给您。

单独的服务和组件

另一种可能性是您的页面函数不订阅get()请求，而是返回它。然后，您可以像这样在onClick()中订阅：

onClick(number) {
    this.CustomersData.page(number).subscribe(res=> this.customers = res;);
}

当然，这是假设您不需要将customer服务中保存的CustomerData变量...如果可以，您可以使用BehaviorSubject

希望这些都可以帮忙。

为什么我必须单击两次才能运行我的功能？

1 个答案:

行为主体

单独的服务和组件