Formatting nested object in a subtable for each row of a main table - arrays

Question

what I've been trying to do for a couple of days is to create a table inside my main table, filling it with more specific data regarding the row of my main table I'm going to click on.
This is the structure of data that comes directly from an API (I have withheld the data for privacy reasons)
[dataSource result] (https://i.stack.imgur.com/dQyV6.png)
This is what I tried to do: I have 2 interfaces, one that collects the data of all objects with an object inside that collects the data of "dataMatricola" (my subobject)
interface basematricolaData{
ATM: string;
centroservizi:string;
abi:string;
nomecliente:string;
codiceFabbrica:number;
matricola:string;
indirizzo:string;
citta:string;
provincia:string;
isActive:boolean;
dataMatricola:subMatricolaData;
}
interface subMatricolaData{
DT_primaInstallazione: Date;
DT_fineGaranziaHW: Date;
anniGaranzia: number;
DT_instW10: Date;
tipologiaXFS:number;
shockBuster:boolean;
DT_instShockBuster: Date;
DT_fineGaranziaShockBuster: Date;
anniNoleggio: number;
DT_fineNoleggio: Date;
cassaContinua: boolean;
pmo: string;
modello: number;
numeroATM: number;
VI: boolean;
OnPremise: string;
note: string;
ultimaModifica_User: any;
DT_ultimaModica: Date
}
And when the results from the api return to me, I do this:
{
this.matricole.getData().subscribe({
next: res => {
this.isLoadingResults = false
this.dataSource = new MatTableDataSource(res)
this.dataSource.paginator = this.paginator
this.dataSource.filterPredicate = this.createFilter()
},
error : error => {
console.log(error)
this.user.logout();
}})
}
In my component.html, this is what I tried to do :
<div class = "table-container">
<mat-table [dataSource]="dataSource" id="excel-table" class="main-table" multiTemplateDataRows>
<!-- Colonna categoria -->
<ng-container matColumnDef="ATM">
<th mat-header-cell *matHeaderCellDef> Categoria </th>
<td class ="main-table-cell" mat-cell *matCellDef="let element"> {{element.ATM}} </td>
</ng-container>
<!-- Colonna centro servizi -->
<ng-container matColumnDef="centroservizi">
<th mat-header-cell *matHeaderCellDef> Centro servizi </th>
<td class ="main-table-cell" mat-cell *matCellDef="let element"> {{element.centroservizi}} </td>
</ng-container>
<!-- Colonna abi -->
<ng-container matColumnDef="abi">
<th mat-header-cell *matHeaderCellDef> Abi </th>
<td class ="main-table-cell" mat-cell *matCellDef="let element"> {{element.abi}} </td>
</ng-container>
<!-- Colonna nome cliente -->
<ng-container matColumnDef="nomecliente">
<th mat-header-cell *matHeaderCellDef> Nome Cliente </th>
<td class ="main-table-cell" mat-cell *matCellDef="let element"> {{element.nomecliente}} </td>
</ng-container>
<!-- Colonna matricola -->
<ng-container matColumnDef="matricola">
<th mat-header-cell *matHeaderCellDef> Matricola </th>
<td class ="main-table-cell" mat-cell *matCellDef="let element"> {{element.matricola}} </td>
</ng-container>
<!-- Colonna indirizzo -->
<ng-container matColumnDef="indirizzo">
<th mat-header-cell *matHeaderCellDef> Indirizzo </th>
<td class ="main-table-cell" mat-cell *matCellDef="let element"> {{element.indirizzo}} </td>
</ng-container>
<!-- Colonna citta -->
<ng-container matColumnDef="citta">
<th mat-header-cell *matHeaderCellDef> Città </th>
<td class ="main-table-cell" mat-cell *matCellDef="let element"> {{element.citta}} </td>
</ng-container>
<!-- Colonna provincia -->
<ng-container matColumnDef="provincia">
<th mat-header-cell *matHeaderCellDef> Provincia </th>
<td class ="main-table-cell" mat-cell *matCellDef="let element"> {{element.provincia}} </td>
</ng-container>
<!-- Colonna isactive -->
<ng-container matColumnDef="isActive">
<th mat-header-cell *matHeaderCellDef> Attivo </th>
<td class ="main-table-cell" mat-cell *matCellDef="let element"> {{element.isActive}} </td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td class="subtable-container" mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
<div class="example-element-detail"
[#detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<mat-table [dataSource]="element.dataMatricola" class="sub-table" >
<ng-container matColumnDef="DT_primaInstallazione">
<th mat-header-cell *matHeaderCellDef> Data prima installazione </th>
<td mat-cell *matCellDef="let element"> {{element.DT_primaInstallazione}} </td>
</ng-container>
<ng-container matColumnDef="DT_fineGaranziaHW">
<th mat-header-cell *matHeaderCellDef> Centro servizi </th>
<td mat-cell *matCellDef="let element"> {{element.DT_fineGaranziaHW}} </td>
</ng-container>
<ng-container matColumnDef="anniGaranzia">
<th mat-header-cell *matHeaderCellDef> Abi </th>
<td mat-cell *matCellDef="let element"> {{element.anniGaranzia}} </td>
</ng-container>
<ng-container matColumnDef="DT_instW10">
<th mat-header-cell *matHeaderCellDef> Data installazione windows 10 </th>
<td mat-cell *matCellDef="let element"> {{element.DT_instW10}} </td>
</ng-container>
<ng-container matColumnDef="tipologiaXFS">
<th mat-header-cell *matHeaderCellDef> Matricola </th>
<td mat-cell *matCellDef="let element"> {{element.tipologiaXFS}} </td>
</ng-container>
<ng-container matColumnDef="modello">
<th mat-header-cell *matHeaderCellDef> Indirizzo </th>
<td mat-cell *matCellDef="let element"> {{element.modello}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="subdisplayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: subdisplayedColumns;"></tr>
</mat-table>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
<tr *matNoDataRow>
<td class="mat-cell" colspan="4">La ricerca con i caratteri "{{input.value}}" non ha prodotto alcun risultato</td>
</tr>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10]" showFirstLastButtons aria-label="Select page of periodic elements"> </mat-paginator>
<div *ngIf="isLoadingResults" style="display: flex; justify-content: center; align-items: center">
<mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
</div>
</div>
But when i try to show the table, this is the error that appears to me :
schermataricerca.component.ts:166 ERROR Error: Provided data source did not match an array, Observable, or DataSource
at getTableUnknownDataSourceError (table.mjs:1024:12)
at MatTable._observeRenderChanges (table.mjs:1763:19)
at MatTable.ngAfterContentChecked (table.mjs:1415:18)
at callHook (core.mjs:2498:18)
at callHooks (core.mjs:2457:17)
at executeInitAndCheckHooks (core.mjs:2408:9)
at refreshView (core.mjs:10460:21)
at refreshEmbeddedViews (core.mjs:11434:17)
at refreshView (core.mjs:10443:9)
at refreshComponent (core.mjs:11480:13)
And obviously, in the table it shows nothing.
Can anyone explain to me how can I show data inside my subobject inside my object in a subtable?

Answer 1

data you pass is not an array
you can create pipe to trasform your data
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'yourpipe'
})
export class YourPipe implements PipeTransform {
transform(value:any): unknown {
return [value]
}
}
<mat-table [dataSource]="element.dataMatricola | yourpipe" class="sub-table" >