I am working with a collection of objects called "ELEMENT_DATA". Each object in the collection has an attribute named "Activite", which is also a collection. My goal is to display this attribute in a specific way.
Below is my app.component.ts:
export class AppComponent {
ELEMENT_DATA: Patient[] = [
{
Nom_Prenom: 'Badre Labiad',
Ne_le: new Date(1991, 9, 18),
Activite: [{"name": 'PPC'}],
Obs: '6h48/ 30j',
IAH: 'IAH 6',
Fuites: 'Fuites : 12',
Renouvellement: new Date(1991, 9, 18),
Valider_AR: false
},
.
.
.
];
} here is my app.component.html :
<table id="fileActive" mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<ng-container matColumnDef="Nom_Prenom">
<th class="nom sortable" *matHeaderCellDef mat-sort-header>
<div>Nom Prénom</div>
</th>
<td class="nom" mat-cell *matCellDef="let element"> {{element.Nom_Prenom}} </td>
</ng-container>
<ng-container matColumnDef="Ne_le">
<th class="naissance sortable date" *matHeaderCellDef mat-sort-header>
<div> Né(e)le</div>
</th>
<td mat-cell *matCellDef="let element"> {{element.Ne_le | date }} </td>
</ng-container>
<ng-container matColumnDef="Activite">
<th class="act" *matHeaderCellDef>
<div>Activités prescites</div>
</th>
<tr *ngFor="let a of ELEMENT_DATA">
<td mat-cell *ngFor="let b of a.Activite">
<span>
{{b.name}}
</span>
</td>
</tr>
</ng-container>
.
.
.
I have tried multiple solutions but haven't found success yet. If anyone can provide a solution, I would greatly appreciate it. Thank you in advance.