8

データを表示し、テーブル ヘッダーとテーブル データを動的にバインドするために角度マテリアル テーブルを使用しています。特定の列のセル コンテンツを動的にフォーマットする方法はありますか?

たとえば、金額列の値を右揃えでフォーマットするにはどうすればよいですか?

私のコードは以下の通りです：

<table mat-table [dataSource]="dataSource" class="" style="width: 100%;">

      <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns; let i = index">
        <th *matHeaderCellDef> {{displayedFields[i].name}}</th>
        <td mat-cell *matCellDef="let element"> {{ element[col] }} </td>
      </ng-container> 

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

そして、私のデータは次のようなものです

[
  {
    "REFERENCE_ID": "ENT201810637610",
    "PRODUCT_TYPE": "IMPS",
    "CUSTOMER_REFERENCE": "CUS12123",
    "BENEFICIARY_NAME": "arun",
    "DEBIT_ACCOUNT": "100002258062",
    "AMOUNT": 342234,
    "STAGE_CODE": "FULLFILMENT",
    "STATUS_CODE": "NEW"
  },
  {
    "REFERENCE_ID": "ENT201808820426",
    "PRODUCT_TYPE": "IMPS",
    "CUSTOMER_REFERENCE": "12121",
    "BENEFICIARY_NAME": "Arun",
    "DEBIT_ACCOUNT": "32423424",
    "AMOUNT": 700,
    "STAGE_CODE": "INITIATION",
    "STATUS_CODE": "NEW"
  }
]
4

5 に答える 5

4

私たちのプロジェクトでは、多くのマットテーブルを使用しています。私は、<ng-container>. <ng-container>ほとんどすべてのテーブルは、各列を個別に定義することによって構築されています。

<ng-container matColumnDef="code">
    <th mat-header-cell *matHeaderCellDef> Employee Code </th>
    <td mat-cell *matCellDef="let employee"> {{ employee.code }} </td>
</ng-container>

<ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td mat-cell *matCellDef="let employee"> 
          {{ employee.status?.description }} 
    </td>
</ng-container>

<ng-container matColumnDef="salary">
    <th mat-header-cell *matHeaderCellDef> Salary </th>
    <td mat-cell *matCellDef="let employee"> {{ employee.salary | currency}} </td>
</ng-container>

これの利点は、必要なスタイルで各列を定義できるだけでなく、パイプや elvis 演算子などのプロパティ固有のオプションを追加できることです。

于 2018-10-31T15:24:24.220 に答える
0

私は同様のことを望んでいましたが、特定の列でのより複雑な表示スタイルが必要でした。ループを使用して、必要なすべての列を表示しています。

たぶん、このコードスニペットが役立ちます

カスタム スタイルの列

それを制御するために、mat-h​​eader-cell と mat-cell 内で単純な ngIf を使用しました。

<table mat-table [dataSource]="dataSource" class="preview-table">
    <ng-container matColumnDef="{{column}}" *ngFor="let column of dcolumns">

        <th mat-header-cell *matHeaderCellDef>
            <ng-container *ngIf="!(column === 'tagList')">
                {{column}}
            </ng-container>
            <ng-container *ngIf="column === 'tagList'">
                {{column}} h
            </ng-container>
        </th>
        <td mat-cell *matCellDef="let element">
            <ng-container *ngIf="!(column === 'tagList')">
                {{element[column]}}
            </ng-container>
            <ng-container *ngIf="column === 'tagList'">
                {{element[column]}} h
            </ng-container>
        </td>

    </ng-container>

    <!-- other field as per syntax -->

</table>
于 2021-07-04T07:05:56.090 に答える