Блог

У меня есть таблица, в которой я передаю данные через свой toto.html но мне не удается ввести в него данные, чтобы таблица была динамичной.Я не могу понять, как передать данные из моего значения ключа json в таблицу

Я новичок.

Обслуживание

 private url 'myUrl'

public tableRows: Observable<any[]> {
 {id: "id1", colonneKey1: "toto"}
}

getRow() {
 return this.tableRows;
}

getdataUrl(): Observable<interface> {
 return this.http.get<interface>(this.myUrl)
}
 

ts.компоненты

 rows$: Observable<any[]>;
tableCols: any[] = [
 {key: "colonneKey1", display: "nom de colonne"}
]

ngOnInit() {
 this.rows$ = this.service.getRow();
 this.get();
}
 

// мне нужно ввести эти данные в таблицу.

 get() {
 this.service.getDataUrl().subscribe((data: interface) => {
  this.tableCols = data.toto
  .map(item => (
  {
   id: item[0]
   name: item[1];
 }));
});
 

toto.html

 <app-table
[tableCols]="tableCols" [tableRows]="rows$ | async "
</app-table>
 

app-table.html

 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container *ngFor="let col of tableCols" matColumnDef="col.key">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element">
    <ng-Container>
     {{ element[col.key] }}
   </ng-container>
   </td>
  </ng-container>

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