在Angular Material表中混合静态和动态列(mat-table)
发布时间:2020-12-17 17:23:41 所属栏目:安全 来源:网络整理
导读:你们有没有人知道是否可以在mat-table中混合动态和静态列?我用它来显示用户数据,但是我需要另一个列来显示关于用户的不同操作按钮.简单地添加另一个ng-container不起作用,因为在displayedColumns中没有列定义,但是当我添加它时,我得到“重复错误”. div cla
你们有没有人知道是否可以在mat-table中混合动态和静态列?我用它来显示用户数据,但是我需要另一个列来显示关于用户的不同操作按钮.简单地添加另一个ng-container不起作用,因为在displayedColumns中没有列定义,但是当我添加它时,我得到“重复错误”.
<div class="example-container mat-elevation-z8"> <div class="example-header" layout="column" flex="100"> <md-form-field floatPlaceholder="never"> <input mdInput #filter placeholder="Filter users"> </md-form-field> <span class="fill-space"></span> <button align="right center" md-raised-button color="primary" (click)="clearFilter()">Clear</button> </div> <md-table *ngIf="users && displayedColumns" #table [dataSource]="dataSource"> <ng-container *ngFor="let set of displayedColumns" [mdColumnDef]="set"> <md-header-cell *mdHeaderCellDef> {{set}} </md-header-cell> <md-cell *mdCellDef="let element"> {{getValue(set,element)}} </md-cell> </ng-container> <ng-container mdColumnDef="akcje"> <md-header-cell *mdHeaderCellDef> Akcje </md-header-cell> <md-cell *mdCellDef="let element"> asdf </md-cell> </ng-container> <------ this doesn't show another column,when added to displayedColums,produces error <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row> <md-row [ngClass]="{'active-user' : current && element.Id == current.Id}" *mdRowDef="let element; let row; columns: displayedColumns;" (click)="gotoUser(element)"></md-row> </md-table> 解决方法
当然,您只需将displayedColumns与动态列数组分开.
<!-- Generic column definition --> <ng-container *ngFor="let column of columns" [matColumnDef]="..."> ... </ng-container> <!-- Special extra column --> <ng-container matColumnDef="myExtraColumn"> ... </ng-container> 这基本上就是你所拥有的.您将迭代列列表以标记列定义,然后添加所需的任何静态列. 然后你可以设置displayedColumns – 由< md-header-row>使用和< md-row> – 连接静态列的列列表. /** Table columns */ columns = [ ...,...,]; /** List of columns to display in which order */ displayedColumns = this.columns.concat(['myExtraColumn']); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |