Отображение таблицы матов в диалоге матов - PullRequest
Новая
       65

Отображение таблицы матов в диалоге матов

0 голосов
/ 01 июля 2019

Я не могу отобразить содержимое таблицы матов, когда использую таблицу матов в диалоге матов. Я могу видеть в 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

result

1 Ответ

1 голос
/ 01 июля 2019

Добавьте 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'];
...