在角度材料中为角度2应用分页并选择网格框

时间:2018-02-05 10:31:42

标签: angular angular-material

我正在尝试在角度应用程序中实现网格形式角度材质,以显示与我的应用程序相关的数据。

我已经实现了表格,用于显示从Rest微服务中收集的数据。

下面显示的是我已经实现了select复选框和paginator的表。

表的

.html文件

    <mat-card>
            <mat-card-content>
            <div class="example-container mat-elevation-z8">
                  <mat-table #table [dataSource]="dataSource">

                <!-- Checkbox Column -->
                <ng-container matColumnDef="select">
                  <mat-header-cell *matHeaderCellDef>
                    <mat-checkbox (change)="$event ? masterToggle() : null"
                                  [checked]="selection.hasValue() && isAllSelected()"
                                  [indeterminate]="selection.hasValue() && !isAllSelected()">
                    </mat-checkbox>
                  </mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <mat-checkbox (click)="$event.stopPropagation()"
                                  (change)="$event ? selection.toggle(row) : null"
                                  [checked]="selection.isSelected(row)">
                    </mat-checkbox>
                  </mat-cell>
                </ng-container>

                <!-- Position Column -->
                <ng-container matColumnDef="position">
                  <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
                  <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
                </ng-container>

                <!-- Name Column -->
                <ng-container matColumnDef="AlertDate">
                  <mat-header-cell *matHeaderCellDef> Alert Date </mat-header-cell>
                  <mat-cell *matCellDef="let element"> {{element.AlertDate}} </mat-cell>
                </ng-container>

                <!-- Weight Column -->
                <ng-container matColumnDef="subject">
                  <mat-header-cell *matHeaderCellDef> Subject </mat-header-cell>
                  <mat-cell *matCellDef="let element"> {{element.subject}} </mat-cell>
                </ng-container>


                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;"
                         (click)="selection.toggle(row)">
                </mat-row>
              </mat-table>
            </div>
    </mat-card-content>
</mat-card>

但我想实现网格而不是表格。我们是否可以为网格列表应用相同的复选框功能和分页?

如果有可能,任何人都可以指导我们如何做到这一点?

0 个答案:

没有答案