Блог

Я думал, что это будет легко, но я не могу найти никакого решения для своей проблемы.

Итак, я хочу создать общий table.component. Моя идея состоит в том, чтобы предоставить всю необходимую информацию, выполнив некоторые выражения в html-коде.

данные данные выглядят следующим образом:

   myData: [
    {
      id: 1,
      name: 'name1',
      stuff: 'stuff..'
    },...
]
 

таблица.компонент:

Моя мысль состоит в том, чтобы использовать идентификаторы / заголовки столбцов для получения информации о данных из tableData — что-то вроде этого: {{row}}.{{item}} // item — идентификатор столбца, в противном item случае — идентификатор для значений данных и row является текущим элементом вне цикла.

 @Component({
  selector: 'app-table',
  template: `
    <div class="{{tableName}}-header">
      <h3>{{tableName}}</h3>
    </div>
    <div class="{{tableName}}-content">
      <table mat-table [dataSource]="tableData" class="">
       
        <div *ngFor="let item of displayedColumns">
          <ng-container matColumnDef="{{item}}">

            <th mat-header-cell *matHeaderCellDef> {{item}} </th>
            <td mat-cell *matCellDef="let row"> {{row}}.{{item}} </td>

          </ng-container>
        </div>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
  `,

  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  @Input() tableName: string;
  @Input() tableData: any;

  displayedColumns: string[] = ['id',  'name', 'stuff'];

  // doing in other component.
  tableData = myData;
 

Есть ли (простой) способ объединить два выражения для создания нового выражения? (разобрать два выражения в строку, объединить их в точечную нотацию и проанализировать их обратно в выражение?)

Для динамического доступа к свойству объекта row вы должны использовать обозначение скобок вместо обозначения точек:

 <td mat-cell *matCellDef="let row"> {{row[item]}} </td>
 

Кроме того, поскольку вы используете Angular Material, вам может быть интересно использовать их MatTextColumn вместо этого: https://material.angular.io/components/table/api#MatTextColumn

Вы можете создать функцию, которая принимает row и item в качестве параметра:

 getDataBy(row, item) => {
    return this.myData[row][item]
}