4

I'm not able to display mat-table content when I use mat-table in mat-dialog. I can see in DOM the right number of "tr" but they are empty.

Can you tell me what I'm doing wrong ??

.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

result

Alexandre
  • 604
  • 5
  • 21

1 Answers1

3

Add displayedColumns: string[] = ['feature', 'version']; to your dialog component.

@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'];
Thierry Falvo
  • 5,892
  • 2
  • 21
  • 39
  • 1
    You don’t have to specify the type of a variable if the value is already specified. (E.g. `displayedColumns: string[] = [/* … */];` should just be `displayedColumns = [/* … */]`) – Edric Jul 01 '19 at 13:03