我想在行中显示数据，但在列中显示...如何更改

Question

我在标题中提到我在行中显示数据时遇到问题...

示例，我想这样显示：

但它显示如下：

这是我的代码：

<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8-">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element; let i = index" class="pointer">
      <p *ngIf="column.length == 11">{{element.agentName}}</p>
    </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element of " [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <div class="element-sub" *ngFor="let item of element.listagentstatus">
          <div mat-cell class="element-agent"></div>
          <div mat-cell class="element-url"><a href="{{item.mainUrl}}"> {{item.mainUrl || null}}</a> </div>
          <div mat-cell class="element-status"> {{item.status}} </div>
          <div mat-cell class="element-lastrun"> {{item.datetime | date: 'dd/MM/yyyy (h:mm)'}} {{columnsToDisplay.length}} </div>
        </div>

      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
  (click)="expandedElement = expandedElement === element ? null : element">
  </tr>
  <tr mat-row *matRowDef="let item; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

我应该在哪里更改。

希望大家都能提供帮助。

先谢谢了。

Answer 1

我已经知道答案了...我刚刚放了<div class="rTableRow">

您可以参考此代码

    <table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8-">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element; let i = index" class="pointer">
      <p *ngIf="column.length == 11">{{element.agentName}}</p>
    </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element of " [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
     <div class="rTableRow"> <!-- I add this class -->
        <div class="element-sub" *ngFor="let item of element.listagentstatus">
          <div mat-cell class="element-agent"></div>
          <div mat-cell class="element-url"><a href="{{item.mainUrl}}"> {{item.mainUrl || null}}</a> </div>
          <div mat-cell class="element-status"> {{item.status}} </div>
          <div mat-cell class="element-lastrun"> {{item.datetime | date: 'dd/MM/yyyy (h:mm)'}} {{columnsToDisplay.length}} </div>
        </div>
       </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
  (click)="expandedElement = expandedElement === element ? null : element">
  </tr>
  <tr mat-row *matRowDef="let item; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

在CSS文件中

.rTableRow {
display: table-row;
width: 100%

}