Angular 数据表：如何从数组中读取数据？

Question

我在 angular 6 中使用 Angular Datatables。我的代码有效，我看到 table 我可以渲染它。我无法搜索我无法控制显示多少项目，页脚显示 "Showing 0 to 0 of 0 entries" 和 "no data available in the table"

users.ts

  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 7,
      deferRender: true,
      retrieve: true
    };
    if (localStorage.getItem('data') !== null) {
      const data = JSON.parse(localStorage.getItem('data'));
      this.item = data.body.response;
      if (Array.isArray(this.item.domains) || this.item.domains.length) {
        for (let i = 0; i < this.item.domains.length; i++) {
          this.users.getUsers(this.item.domains[i].id).subscribe((res: any) => {
            this.domain_users = res.response.items;
            // the api returns arrays and so I had to iterate over them, and not all of them
            // the first array is empty
            for (let j = 0; j < this.domain_users.length; j++) {
              if (this.domain_users[j].user !== undefined) {
                this.user.push(this.domain_users[j].user);

              }
            }
          }, error => {
            console.log('getUsers error, probably session expired on the server ' + error);
          });
        }
      }
    }
  }
  ngAfterViewInit(): void {
    this.dtTrigger.next();
  }
  ngOnDestroy(): void {
    // Do not forget to unsubscribe the event
    this.dtTrigger.unsubscribe();
  }
  rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      // Destroy the table first
      dtInstance.destroy();
      // Call the dtTrigger to rerender again
      this.dtTrigger.next();
    });
  }

html

<table id="detailed-resource-optria" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="compact row-border hover cell-border"
    data-page-length='10'>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of user">
            <td>{{item.profile?.fname}}</td>
            <td>{{item.profile?.lname}}</td>

        </tr>
    </tbody>
</table>

我很确定这个问题是因为我直接从 this.user 填充 table 而没有经过 dtOptions，但我不知道如何解决它，我尝试从数组中提供数据作为源，但这行不通。

Answer 1

如果需要大量使用Observable，使用forkJoin

//define an array of observables
let request:Observable[]=[]
if (Array.isArray(this.item.domains) || this.item.domains.length) {
    for (let i = 0; i < this.item.domains.length; i++){
         //just fill the array of observables
         request.push(this.users.getUsers(this.item.domains[i].id))      
    }
    forkJoin(request).subscribe((response:any[])=>{
         //in response[0], we have the response of getUsers(this.item.domain[0].id)
         //in response[1], we have the response of getUsers(this.item.domain[1].id)
         ....
         for (let res in response)
         { 
             //You can use concat and filter
             let users=Res.response.items
                 .filter(us=>us.user!=undefined)
                 .map(us=>us.user);
             this.user.concat(users);
         }
    })
}

Answer 2

在将所有数据推送到 this.user 后，您是否尝试手动运行ning this.dtTrigger.next();？如此处所建议：l-lin.github.io/angular-datatables/#/basic/angular-way

（应操作员的要求将评论提升为回答）

我猜这只是一个时间问题——因为你的异步查询直到 ngAfterViewInit 方法有运行之后才返回，它需要一个额外的触发器加载。很高兴它起作用了:)

Angular 数据表：如何从数组中读取数据？

Angular datatables: how to read data from array?

angular-datatables

angular

angular6