How to display the array value in a MatTableDataSource html

Question

I'm trying to diplay "pat_nom" in my view .

app.component.ts:

getPatient() {
    this.prescriptionService.getPrescription().then((result: Patient[]) => {
        if(!result){
            return;
        }
         this.dataSource= new MatTableDataSource(result);

        }
    )

app.component.html :

<ng-container matColumnDef="pat_nom">
    <th class="nom sortable" *matHeaderCellDef mat-sort-header>
        <div>Nom Prénom</div>
    </th>
    <td class="nom" mat-cell *matCellDef="let element"> {{element.patients.pat_nom}} </td>
</ng-container>

Patient.ts :

export interface Patient {
pat_nom: string;
pat_prenom: string;
pat_date_naissance:Date;
prescriptions: Array<string>;
ind_obs: number;
ind_iah: number;
ind_fuites: number;

}

Result of my service in json :

"patients": [
{
  "ind_obs": "178",
  "ind_iah": 2.75,
  "pat_date-naissance": "1957-02-23 00:00:00.0",
  "pat_prenom": "François",
  "ind_fuite": 2.75,
  "pat_id": "4405",
  "prescriptions": [
    {
      "pres_type": "PPC"
    },
    {
      "pres_type": "PPC"
    }
  ],
  "ind_niveau": 2,
  "pat_nom": "ANDRE"
},

I'm trying to diplay "pat_nom" in my view . i think that i have probleme with this

   <td class="nom" mat-cell *matCellDef="let element"> {{element.patients.pat_nom}} </td>

i can't acess to pat_nom.

my app

Answer 1

@user123456 i find the solution to my probleme :

prescription.serivce.ts :

 private extractData(res: Response): any {
    const body = res;
    return body || {};
}

public getPrescription(): Observable<any> {
    return new Observable<any>(observer => {
        Liferay.Service(
            '/archipel.prescription/get-list-prescriptions',
            {
                qPatient: 'ANDRE',
                qMedecin: '144',
                qType: 'PPC',
                start: -1,
                end: -1
            },
            function (obj: any) {
                return observer.next(obj);
            }
        )
    });
}


   getPatientService(): Observable<any> {

    return this.getPrescription().pipe(map(this.extractData),
        catchError(this.handleError));
}



private handleError(error: HttpErrorResponse): any {
    if (error.error instanceof ErrorEvent) {
        console.error('An error occurred:', error.error.message);
    } else {
        console.error(
            `Backend returned code ${error.status}, ` +
            `body was: ${error.error}`);
    }`enter code here`
    return throwError(
        'Something bad happened; please try again later.');
}

app.component.ts :

export class AppComponent {


public pageSize = 10;
public currentPage = 0;
public totalSize = 0;
params: LiferayParams;
labels: any;
filtre: string = "";
count: number = 1;
displayedColumns: string[] = [
    "pat_nom",
    "pat_date_naissance",
    "prescriptions",
    "ind_obs",
    "ind_iah",
    "ind_fuites",
];


patients: Patient[] = [];
tableDataSource = new MatTableDataSource();

  getPatient() {
    this.prescriptionService
        .getPatientService()
        .subscribe((result: any) => {
            this.patients = result.patients
            this.tableDataSource.data = this.patients;
     
        });
}

app.component.html :

<table id="fileActive" mat-table [dataSource]="tableDataSource" matSort class="mat-elevation-z8" >

<ng-container matColumnDef="pat_nom">
    <th class="nom sortable" *matHeaderCellDef mat-sort-header>
        <div> Nom</div>
    </th>
    <td class="nom" mat-cell *matCellDef="let element"> {{element.pat_nom }} {{element.pat_prenom}} </td>
</ng-container>


<ng-container matColumnDef="pat_date_naissance">
    <th class="naissance sortable date" *matHeaderCellDef mat-sort-header>
        <div> Né(e)le</div>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.pat_date_naissance | date : 'dd/MM/yyyy' }} </td>
</ng-container>


<ng-container matColumnDef="prescriptions">
    <th class="act" *matHeaderCellDef>
        <div>Activités prescrites</div>
    </th>

    <td class="act" mat-cell *matCellDef="let element">
        <div class="align">
            <div *ngFor="let a of element.prescriptions"
                 [ngClass]="{'vent': a.pres_type === 'Vent',
        'o2':a.pres_type === 'O2',
        'aidt':a.pres_type === 'Aidt',
        'aero':a.pres_type === 'Aéro',
        'perf':a.pres_type === 'Perf',
        'nut':a.pres_type === 'NUT',
        'ppc':a.pres_type === 'PPC'}">
                {{a.pres_type}}

            </div>
            </div>


    </td>

</ng-container>


<ng-container matColumnDef="ind_obs">
    <th class="obs sortable obsv" *matHeaderCellDef mat-sort-header>
        <div>Obs.</div>
    </th>
    <td mat-cell *matCellDef="let element">
        <div [ngClass]="displayObsCss(element.ind_niveau)">
            {{element.ind_obs}}
        </div>
    </td>
</ng-container>


<ng-container matColumnDef="ind_iah">
    <th class="iah sortable obsv" *matHeaderCellDef mat-sort-header>
        <div>
            IAH
        </div>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.ind_iah}} </td>
</ng-container>


<ng-container matColumnDef="ind_fuites">
    <th class="fuites sortable obsv" *matHeaderCellDef mat-sort-header>
        <div>
            Fuites
        </div>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.ind_fuite}} </td>
</ng-container>


<ng-container matColumnDef="Renouvellement">
    <th class="renew" *matHeaderCellDef>
        <div>
            Renouvellement
        </div>
    </th>
    <td mat-cell *matCellDef="let element">
        {{element.Renouvellement | date }} </td>
</ng-container>
<ng-container matColumnDef="Valider_AR">
    <th class="valid" *matHeaderCellDef>
        <div>
            Valider AR
        </div>
    </th>
    <td mat-cell *matCellDef="let element">
        <mat-checkbox class="example-margin" [(ngModel)]="element.Valider_AR"
                      [ngModelOptions]="{standalone: true}"></mat-checkbox>
        <span>A Renouveler </span>
    </td>
</ng-container>

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