如何在 MatTableDataSource html 中显示数组值

如何解决如何在 MatTableDataSource html 中显示数组值

我正在尝试在我看来显示“pat_nom”。

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>

患者.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;

}

我在 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"
},

我正在尝试在我看来显示“pat_nom”。我认为我对此有疑问

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

我无法访问 pat_nom。

my app

解决方法

尝试编写 {{element.pat_nom}}，因为数据源是整个数组，而 pat_nom 是其中的一个元素。

,

@user123456 我找到了我的问题的解决方案：

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>