Mat Table into mat对话框

Question

您好，我正在尝试将一个mat-table放在mat对话框的内容中，但它没有显示数据。

这是dialog-content.html

<mat-dialog-content class="pb-3" *ngIf="action == 'Update';">
<form #userForm="ngForm">
<table mat-table [dataSource]="dataSource2" class="table employee-list no-wrap">

    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <ng-container matColumnDef="employee_view">
      <th mat-header-cell *matHeaderCellDef>Employee View</th>
      <td mat-cell *matCellDef="let element"> 
          <!-- {{element.name}} -->
          <input type="text" value="{{element.employee_view}}">
          <mat-checkbox [disabled]="true" color="primary" [checked]="row.employee_view" (change)="checkCheckBoxvalue($event,row.perfilid, employee_view_name)"></mat-checkbox>
      </td>
    </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns2;"></tr>
    </table>
</form>

这是component.ts

  dataSource2 = new MatTableDataSource<any>();
  displayedColumns2: string[] = ['name', 'employee_view'];

  constructor(
      public datePipe: DatePipe,
      public apiSvc: ProfileService,
      public snackBar: MatSnackBar,
      public translate: TranslateService,
      public dialogRef: MatDialogRef<ProfileDialogContent>,
      // @Optional() is used to prevent error if no data is passed
      @Optional() @Inject(MAT_DIALOG_DATA) public data: Profile) {
      this.local_data = { ...data };
      console.log(this.local_data);
      
      this.action = this.local_data.action;
      this.dataSource2.data = this.local_data;
      console.log(this.dataSource2);
  }

并在我单击铅笔按钮进行更新时显示此信息

Image

如果有帮助，下面是我传递给dataSource的数组图像

array

Answer 1

数据源需要是一个数组。您传递了一个对象。当您将数据传递给数据源时，只需将数据包装到一个数组中，就可以解决您的问题。

this.dataSource2.data = [this.local_data];