angular-material-table | 易学教程

Not able to set initial pageIndex in mat-paginator when dealing with large datasets

阅读更多关于 Not able to set initial pageIndex in mat-paginator when dealing with large datasets

问题 From this SO post i learned that in order to deal with large datasets you should set dataSource.paginator before dataSource.data in ngAfterViewInit. However when doing this I am not able to set an initial pageIndex using this.paginator.pageIndex. https://stackblitz.com/edit/angular-mat-table-v2 When I load my data in ngOnInit and the paginator after this in ngAfterViewInit, I am able to set the initial pageIndex: https://stackblitz.com/edit/angular-mat-table-v1 回答1: You can try this: ngOnInit

Angular Material Table Sorting - Data Doesn't sort when inside a *ngIf condition

阅读更多关于 Angular Material Table Sorting - Data Doesn't sort when inside a *ngIf condition

问题 I have a Angular Material Table. When I surround html for the table with a <div *ngIf="true"> the table renders but the data no longer sorts when clicking on the header column. Taking the example from: https://material.angular.io/components/table/overview#sorting And modifying it, just by adding the <div *ngIf="true"> ... </div> demonstrates this behavior. Example is at: https://stackblitz.com/edit/angular-quzvjv 回答1: Do the console log in ngOnInit of this.sort Angular didn't catch MatSort

Why am I unable to apply a border to an angular mat-table row?

阅读更多关于 Why am I unable to apply a border to an angular mat-table row?

问题 I have a simple angular material table: <table mat-table [dataSource]="scoreboardData"> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <ng-container matColumnDef="totalScore"> <th mat-header-cell *matHeaderCellDef> Total Score </th> <td mat-cell *matCellDef="let element"> {{element.totalScore}}</td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

Why am I unable to apply a border to an angular mat-table row?

阅读更多关于 Why am I unable to apply a border to an angular mat-table row?

I have a simple angular material table: <table mat-table [dataSource]="scoreboardData"> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <ng-container matColumnDef="totalScore"> <th mat-header-cell *matHeaderCellDef> Total Score </th> <td mat-cell *matCellDef="let element"> {{element.totalScore}}</td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> I would like to add some

How to pass data to material table data source dynamically

阅读更多关于 How to pass data to material table data source dynamically

问题 I want to pass the dynamic data to material table. I show my code: parent.component.html <div class="overview"> <div class="vehicle-img"> <img src={{vehicleImg}} /> </div> <div class="board"> <div class="board-column company-overview"> <div class="board-column-header">{{ "COMPANY_OVERVIEW.TITLE" | translate}}</div> <div class="board-column-content"> <app-company-overview [companyOverviewData]="companyOverviewData"></app-company-overview> <div *ngIf="!companyOverviewData" class="loading"> <app

How to pass data to material table data source dynamically

阅读更多关于 How to pass data to material table data source dynamically

I want to pass the dynamic data to material table. I show my code: parent.component.html <div class="overview"> <div class="vehicle-img"> <img src={{vehicleImg}} /> </div> <div class="board"> <div class="board-column company-overview"> <div class="board-column-header">{{ "COMPANY_OVERVIEW.TITLE" | translate}}</div> <div class="board-column-content"> <app-company-overview [companyOverviewData]="companyOverviewData"></app-company-overview> <div *ngIf="!companyOverviewData" class="loading"> <app-loading></app-loading> </div> </div> </div> <div class="board-column feeds"> <div class="board-column

MatTable Expand Collapse Icon issue on pagination and sort

阅读更多关于 MatTable Expand Collapse Icon issue on pagination and sort

问题 I've a angular material table which uses detailRow directive to insert a detail/sibling adjacent row to a table row. StackBlitz I wanted to give it an appearance of as if the row is being expanded or collapsed, so I added couple of icons to it which are toggled on the click of cell containing them. <mat-header-cell *matHeaderCellDef> Action </mat-header-cell> <mat-cell *matCellDef="let element"> <button mat-icon-button color="primary" (click)="element[i] = !element[i]"> <mat-icon id="expand

MatTable Expand Collapse Icon issue on pagination and sort

阅读更多关于 MatTable Expand Collapse Icon issue on pagination and sort

I've a angular material table which uses detailRow directive to insert a detail/sibling adjacent row to a table row. StackBlitz I wanted to give it an appearance of as if the row is being expanded or collapsed, so I added couple of icons to it which are toggled on the click of cell containing them. <mat-header-cell *matHeaderCellDef> Action </mat-header-cell> <mat-cell *matCellDef="let element"> <button mat-icon-button color="primary" (click)="element[i] = !element[i]"> <mat-icon id="expand_more" #expand_more *ngIf="!element[i] " >expand_more</mat-icon> <mat-icon id="expand_less" #expand_less