角形mat-list-item占据整个列单元格

Question

我有一个包含多个列的Angular网格表。第一列只包含日期，我添加了一个mat-list-item，其日期显示在行单元格顶部附近。其余各列，每个行单元格包含30个mat-list-items。

我想使第一个日期列垂直居中，以便它位于中间/中心并占据整个单元格。

是否有一种方法可以使日期单元格占据整个行单元格？还是我必须重写为垫列表项旁边的内容？谢谢。

这是我的角度代码。第一个div的日期栏位于mat-list-item的顶部。在下一个div中，有一个ngFor，它循环通过一个集合在行单元格中插入许多行。

<div class="container" fxLayout='row' fxLayoutWrap *ngFor="let data of myData">


/*  first column with data */
              <div fxLayout="row" fxFlex="9%" fxFlex.gt-sm="9%">
                <div fxLayout="column" fxFlex>
                  <mat-list class="wf-font-list"  >
                    <mat-list-item fxLayoutAlign="center center" class="dateCell"><span><strong>{{weekly.date | date: 'MM/dd/yyyy' }}</strong></span></mat-list-item>
                  </mat-list>
                </div>
              </div>
/*  next column with many rows */
              <div fxLayout="row" fxFlex="19%" fxFlex.gt-sm="19%">
                <div fxLayout="column" fxFlex>
                  <mat-list class="wf-list">
                    <div class="ng-container">
                      <mat-list-item fxLayoutAlign="start" class="date-list-item"><strong><span>Date</span></strong></mat-list-item>
                    </div>
                    <div class="ng-container" *ngFor="let displayName of data.displayNames; let i = index">
                      <mat-list-item fxLayoutAlign="start">
                        <strong><span>{{displayName.name}}</span></strong>
                      </mat-list-item>
                      <div class="ng-container">
                        <mat-list class="wf-list">
                          <mat-list-item fxLayoutAlign="start" *ngFor="let label of data.Names">
                            <span class="indent">{{label}}</span>
                          </mat-list-item>
                        </mat-list>
                      </div>
                    </div>
                  </mat-list>
                </div>
              </div>

这是CSS

.dateCell {
  background-color: #ffffff !important;
  font-size: 16px; 
  border-bottom: none !important;
  border-top: none !important;
}