Как исправить <td>столбец просто отобразить один столбец массива

Question

Я хочу отобразить список данных в таблице, как на картинке ниже ..

, но получилось вот так ..

ниже мой HTML-код

main.component.html

<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"><p>{{element.agentName}}</p></td>
  </ng-container>
  <ng-container matColumnDef="expandedDetail" >
  <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
  <div class="example-element-detail"
                            [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
 <div class="element-sub">
 <div mat-cell class="element-agent"> {{element.agentName}} </div>
 <div mat-cell class="element-url"> {{element.url}} </div>
 <div mat-cell class="element-status"> {{element.status}} </div>
 <div mat-cell class="element-lastrun"> {{element.createdDate | date: 'dd/MM/yyyy (h:mm)'}} </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 row; columns: ['expandedDetail']" class="example-detail-row"></tr>
                 </table>

А ниже мой компонентный код

main.component.ts

 export class MainComponent{
  agents: any = [];
  columnsToDisplay: string[]  = ['Name', 'Domain', 'Status', 'Date'];
  expandedElement: AgentDetails | null;
  groups: string[] =['AGENT'];
  selectedRow: any;
  selection = new SelectionModel<AgentDetails>(true, []);
  displayedColumns: string[] = ['name', 'url', 'status','date'];
  private dataSource: MatTableDataSource<AgentDetails>;

  constructor(private agentservice: AgentService) { 
      this.selection.onChange.subscribe(data => {
      this.selectedRow = new Agent(data.added[0]);
      this.groups = this.selectedRow.groups ? this.selectedRow.groups.split(',') : [];
    });  console.log("selectrow:" +this.selectedRow);
    this.loadAgents();
  }

  loadAgents(){
    this.agentservice.getAgentService().subscribe(res =>{
      this.dataSource = new MatTableDataSource<AgentDetails>(res);
      console.log(this.dataSource);
    });
  }

}

Надеюсь, что вы все можете помочь ..

Заранее благодарны

Answer 1

Вы можете использовать colspan с элементом td, чтобы изменить количество столбцов в ячейке:

Обратите внимание на ширину последней строки в три столбца.

<table border="1">
  <tr>
    <td>hi_1</td>
    <td>hi_2</td>
    <td>hi_3</td>
  </tr>
  <tr>
    <td colspan="3"> <!-- Change 3 to whatever -->
      big_hi
    </td>
  </tr>
</table>