未在表中显示数据

Question

我想显示来自APi的数据列表。 console.log(this.dataSource.data)已显示

但是在 HTML 中，它不会显示。贝娄我提供了代码供您参考。

HTML

<table
      mat-table
      [dataSource]="dataSource"
      matSort
      multiTemplateDataRows
      class="mat-elevation-z8-"
    >
    <ng-container
        matColumnDef="{{ column }}"
        *ngFor="let column of columnsToDisplay | paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }"
      ><!-- -->
      <ng-container *ngIf="column === 'select'; else notSelect">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()">
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox (click)="$event.stopPropagation()"
                        (change)="$event ? selection.toggle(row) : null"
                        [checked]="selection.isSelected(row)"
                        >
          </mat-checkbox>
        </td>
      </ng-container>

              <ng-container #headerSort>
        <th mat-header-cell *matHeaderCellDef><strong>{{ column }}{{totalItems}}</strong></th>
      </ng-container>

        <td
          mat-cell
          *matCellDef="let element; let i = index"
          (click)="open(element)"
          class="pointer"
        >
          <p>
            {{ element.created_at}}

          </p>
         <p>
          {{element.state}}
          </p>
          <p>
              {{element.number}}
          </p>
          <p>
          {{element.title}}
        </p>

        </td>

      </ng-container>

      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
      <tr
        mat-row
        *matRowDef="let element; columns: columnsToDisplay"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"

      ></tr>
      <!-- <tr
        mat-row
        *matRowDef="let item; columns: ['expandedDetail']"
        class="example-detail-row"
      ></tr> -->
    </table>
    <pagination-controls (pageChange)="loadAgents($event)" id="server" ></pagination-controls>

组件

    import {ChangeDetectionStrategy, ViewChild, Input, Component } from '@angular/core';
import {Observable, of} from 'rxjs';
import { delay, map, tap } from 'rxjs/operators';
import { MatTableDataSource, MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatPaginator, MatSort, Sort } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
import {HttpDatabase, GithubIssue} from './app.service';

// interface IServerResponse {
//     items: string[];
//     total: number;
// }

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent  {
  data: any = [];
  selectedRowIds: string;
  element:string;
  columnsToDisplay: string[]  = ['created', 'state', 'number', 'title'];

  selection = new SelectionModel<GithubIssue>(true, []);
  displayedColumns: string[] = ['created_at','number', 'state', 'title'];
  private dataSource: MatTableDataSource<GithubIssue>;
  @ViewChild(MatSort, {static: false}) sort: MatSort;
    p: number = 1;
    total: number;
    loading: boolean;

    constructor(private httpDatabase: HttpDatabase){ }
marked = false;
isAllSelected() {
    const numSelected = this.selection.selected.length;
    const idSelected = this.selection.selected;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  masterToggle() {
    if(this.isAllSelected()){
            this.selection.clear();
            // this.isButtonEnable = true;
            this.marked = false;
        }else{
            this.dataSource.data.forEach(row => this.selection.select(row));
            // this.isButtonEnable = false;
            this.marked = true
    }

}


    ngOnInit() {
        this.getPage('desc','created',1);
    }

    getPage(sort: string, order: string, page: number) {
       this.httpDatabase.getRepoIssues(sort, order, page).subscribe(res =>{
      console.log("TEST PAGE " +page)
      this.dataSource = new MatTableDataSource<GithubIssue>(res['items']);
       console.log(this.dataSource.data)
});
    }
}

有人可以教我如何显示它。 demo供您参考。

希望大家都能提供帮助

预先感谢

Answer 1

您必须从模板中的data中获取dataSource：

<table
      mat-table
      [dataSource]="dataSource.data"
      matSort
      multiTemplateDataRows
      class="mat-elevation-z8-"
>

更新： 修复了https://stackblitz.com/edit/ngx-pagination-server-side-mockup-pradak

的派生堆栈闪电战