Question

So, here's the issue:

I have a mat-table with 87 columns. The data it displays can have several status, depending on the status, the data will be displayed in different subscreens, but all are in the same component, the issue is that each subset of data uses the same table specification. So I end up with a template which duplicates all 87 fields 3 times (1 per status) and Sonar hates this

I can't find a way to do something like this:

 <table mat-table [dataSource]="dataSourceStatus1" class="head-table">
      <app-my-comp [dataSource]="dataSourceStatus1"></app-my-comp>
      <tr mat-header-row *matHeaderRowDef="columnId"></tr>
      <tr mat-row *matRowDef="let row; columns: columnId" class="row-tables"></tr>
 </table>

Where app-my-comp is a component like:

@Component({
    selector: 'app-my-comp',
    templateUrl: './my.html',
    styleUrls: ['./style-my-style.component.scss'],
})

export class MyComponent {

    @Input() dataSource: Status1Data[];

}

And the html is the aforementioned 87 fields:

 <ng-container matColumnDef="field1">
    <th mat-header-cell *matHeaderCellDef>field 1</th>
    <td mat-cell *matCellDef="let let1">
        {{ myObject.someList.field1 }}
    </td>
</ng-container>

<ng-container matColumnDef="field2">

...

The error I get is as follows:

Could not find column with id "field1"

Stackblitz:

https://stackblitz.com/edit/angular-ftmcr4?file=app%2Ftable-basic-example.ts

Use component inside mat-table

0 个答案: