在垫对话框中显示垫表

Question

在mat-dialog中使用mat-table时，我无法显示mat-table的内容。我可以在DOM中看到正确的数字“ tr”，但它们为空。

你能告诉我我在做什么错吗??

.html

<table mat-table [dataSource]="versions[versionIndex].datas" >

      <ng-container matColumnDef="feature">
        <th mat-header-cell *matHeaderCellDef> col 1 </th>
        <td mat-cell *matCellDef="let element"><span>{{element.feature}}</span></td>
      </ng-container>

      <ng-container matColumnDef="version">
        <th mat-header-cell *matHeaderCellDef width="100px">col 2</th>
        <td mat-cell *matCellDef="let element" width="100px"><span>{{element.version}}</span></td>
      </ng-container>

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

.ts

 @Component({selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog implements OnInit {
  public versions: any[] = [];
  public versionIndex: number = 0;
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

ngOnInit(){
      var toAdd = {
        num: "1",
        date: "01/10/2019",
        datas: []
      };
      toAdd.datas.push({
        feature:"feature 1",
        version:""
      }); 
      toAdd.datas.push({
        feature:"feature 2",
        version:"0.2"
      }); 
      toAdd.datas.push({
        feature:"feature 3",
        version:"0.3"
      }); 
      toAdd.datas.push({
        feature:"feature 4",
        version:""
      }); 
      this.versions.push(toAdd);

  }
}

https://stackblitz.com/edit/angular-q25pg9

Answer 1

将displayedColumns: string[] = ['feature', 'version'];添加到对话框组件。

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog implements OnInit {
  public versions: any[] = [];
  public versionIndex: number = 0;
  displayedColumns: string[] = ['feature', 'version'];