服务器分页：Typescript 将 GET 方法数据保存到数字

Question

我需要为 table 实现服务器分页，其中数据取自 SQL 数据库，我需要将响应中的数据保存为数字（count:number) 但如果我检查控制台日志中的 totalItems 值未定义。

如果我将 totalItems 更改为 100，除了不显示正确的页数外，一切都几乎完美。

GET方法的return值只是那个数字。所以我必须把那个数字放在 count:number 或 return 那个数字作为打字稿方法的值。

component.ts

count:number;

constructor(
    private service: UserService

  ) {
    this.config = {
      itemsPerPage: 10,
      currentPage: 1,
      totalItems : this.service.getPaginationInfo()
    };
   }

service.ts

getPaginationInfo() {
    this.http.get(this.BaseURL + '/Count?id=' + this.userIdString)
    .subscribe(result => {
     this.count = result as number},
     (err) => {
       console.log(err);
     }

     );

    return this.count;
  }

ASP .NET 核心方法：

[HttpGet]
        public int GetContactCount(string id)
        {

            return _context.ContactDetails.Count(w => w.UserId == id);

        }

获取方法return这个：

HTML:

<table class="table table-hover text-white transparent-dark">
    <tr *ngFor="let contact of service.list | paginate: config">
      <td data-toggle="modal" data-target="#UpdateContactModal" (click)="populateForm(contact)">{{contact.Name}}</td>
      <td data-toggle="modal" data-target="#UpdateContactModal" (click)="populateForm(contact)">{{contact.PhoneNumber}}
      </td>
      <td>
        <i class="far fa-trash-alt fa-lg text-danger" (click)="this.service.onDelete(contact.ContactId)"></i>
      </td>
    </tr>
  </table>
  <pagination-controls (pageChange)="pageChanged($event)" class="center-footer text-white"></pagination-controls>

Answer 1

您的 getPaginationInfo() 是一个异步函数。您不能 return 一个简单的 number 类型。

要解决该问题，请将服务更改为 return 和 Observable<number>:

  getPaginationInfo() {
    return this.http.get<number>(this.BaseURL + '/Count?id=' + this.userIdString);
    .subscribe(
      result => { this.count = result as number},
      (err) => { console.log(err); }
     );
    return this.count;
  }

并按以下方式更改调用：

this.config = {
  itemsPerPage: 10,
  currentPage: 1,
  totalItems : 0
};

this.service.getPaginationInfo().subscribe(
    result => { 
      this.config.totalItems = result;
    },
    (err) => { console.log(err); }
);

服务器分页：Typescript 将 GET 方法数据保存到数字

Server Pagination: Typescript Save GET method data to number

database

typescript

asynchronous

asp.net-core

subscribe