Question

假设我有这样的数据：

      <md-table #table [dataSource]="dataSource">
        <!-- first Column -->
        <ng-container mdColumnDef="position">
          <md-header-cell *mdHeaderCellDef> No. </md-header-cell>
          <md-cell *mdCellDef="let element"> {{element.position}} </md-cell>
        </ng-container>

        <!-- second Column -->

        <ng-container mdColumnDef="name">
          <md-header-cell *mdHeaderCellDef> Name </md-header-cell>
          <md-cell *mdCellDef="let element"> {{element.name}} </md-cell>
        </ng-container>

        <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
        <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
      </md-table>

如何同时将css类应用于第一列和第二列？

如果我使用span标记包装第一列和第二列并对其应用css类，则它将无效。

Answer 1

为什么要添加课程？为1st＆amp;第二栏有很多方法。

1）使用CSS3 nth-child选择器，你可以选择mat row＆amp; amp; mat mat的mat cell。它的风格就像;

.mat-row .mat-cell:nth-child(1), .mat-row .mat-cell:nth-child(2) {
    //add style here to apply 1st & 2nd clumn
}

2）材料创建类cdk-column-position＆amp; {1}为您的第一个＆amp;第二列（基于定义的mdColumnDef），因此您也可以为它们添加样式：

cdk-column-name

3）你可以在md-header＆amp;上使用[ngClass]第1版和第1版的md-cell标签第二栏。并且有条件地分别为这两列提供类。所以你的模板可以是

.cdk-column-position, .cdk-column-name {
  //add styles for both columns
}

Plunker Example

将类添加到角度材质2数据上的多个行

1 个答案: