Question

我正在使用Angular 7和mat-table。 https://material.angular.io/components/table/overview

但是，我可以找到的所有示例都使用一个简单的数组来创建mat-table。我的数组（见下文）在数组中有一个数组。我需要遍历结果数组，然后遍历“ line_items”数组。但是找不到如何完成此操作的单个示例吗？

Component.ts

<mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)">

    <ng-container matColumnDef="line_items">
      <mat-header-cell *matHeaderCellDef mat-sort-header>line_items</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.line_items}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="number">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Number</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.number}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="category">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Category</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.category}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="original_budget">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Original Budget</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.original_budget}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="approved_cos">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Approved Cos</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.approved_cos}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="revised_budget">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Revised Budget</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.revised_budget}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="pending_budget_changes">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Pending Budget Changes</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.pending_budget_changes}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="projected_budget">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Projected Budget</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.projected_budget}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="loading">
      <mat-footer-cell *matFooterCellDef colspan="6">
        Loading data...
      </mat-footer-cell>
    </ng-container>

    <ng-container matColumnDef="noData">
      <mat-footer-cell *matFooterCellDef colspan="6">
        No data.
      </mat-footer-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row, $event)" (dblclick)="onEdit(row, $event)"></mat-row>

    <mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':dataSource!=null}"></mat-footer-row>
    <mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(dataSource!=null && dataSource.data.length==0)}"></mat-footer-row>
</mat-table>

数组

{
  "results": [
    {
      "name": "General Requirements",
      "id": "1",
      "line_items": [
        {
          "name": "Project Manager",
          "number": "442",
          "category": "L",
          "original_budget": 30000,
          "approved_cos": 0,
          "revised_budget": 30000,
          "pending_budget_changes": 0,
          "projected_budget": 30000,
          "committed_costs": 0,
          "direct_costs": 0,
          "pending_costs_changes": 0,
          "projected_costs": 0,
          "forecast_to_complete": 30000,
          "estimated_cost_at_completion": 30000,
          "projected_over_under": 0
        },
        {
          "name": "Project Engineer",
          "number": "564",
          "category": "L",
          "original_budget": 17000,
          "approved_cos": 0,
          "revised_budget": 17000,
          "pending_budget_changes": 0,
          "projected_budget": 17000,
          "committed_costs": 0,
          "direct_costs": 0,
          "pending_costs_changes": 0,
          "projected_costs": 0,
          "forecast_to_complete": 17000,
          "estimated_cost_at_completion": 17000,
          "projected_over_under": 0
        },
        {
          "name": "Superintendent",
          "number": "766",
          "category": "L",
          "original_budget": 55000,
          "approved_cos": 0,
          "revised_budget": 55000,
          "pending_budget_changes": 0,
          "projected_budget": 55000,
          "committed_costs": 0,
          "direct_costs": 0,
          "pending_costs_changes": 0,
          "projected_costs": 0,
          "forecast_to_complete": 55000,
          "estimated_cost_at_completion": 55000,
          "projected_over_under": 0
        },
        {
          "name": "Project Coordinator",
          "number": "876",
          "category": "L",
          "original_budget": 5000,
          "approved_cos": 0,
          "revised_budget": 5000,
          "pending_budget_changes": 0,
          "projected_budget": 5000,
          "committed_costs": 0,
          "direct_costs": 0,
          "pending_costs_changes": 0,
          "projected_costs": 0,
          "forecast_to_complete": 5000,
          "estimated_cost_at_completion": 5000,
          "projected_over_under": 0
        }
      ]
    },
    {
      "name": "Doors And Windows",
      "id": "2",
      "line_items": [
        {
          "name": "Doors",
          "number": "600",
          "category": "O",
          "original_budget": 2000,
          "approved_cos": 0,
          "revised_budget": 2000,
          "pending_budget_changes": 0,
          "projected_budget": 2000,
          "committed_costs": 0,
          "direct_costs": 0,
          "pending_costs_changes": 0,
          "projected_costs": 0,
          "forecast_to_complete": 2000,
          "estimated_cost_at_completion": 2000,
          "projected_over_under": 0
        },
        {
          "name": "Doors",
          "number": "600",
          "category": "S",
          "original_budget": 67000,
          "approved_cos": 0,
          "revised_budget": 67000,
          "pending_budget_changes": 0,
          "projected_budget": 67000,
          "committed_costs": 0,
          "direct_costs": 0,
          "pending_costs_changes": 0,
          "projected_costs": 0,
          "forecast_to_complete": 67000,
          "estimated_cost_at_completion": 67000,
          "projected_over_under": 0
        }
      ]
    },
    {
      "name": "Finishes",
      "id": "3",
      "line_items": [
        {
          "name": "Kitchen Sink",
          "number": "800",
          "category": "O",
          "original_budget": 5000,
          "approved_cos": 0,
          "revised_budget": 5000,
          "pending_budget_changes": 0,
          "projected_budget": 5000,
          "committed_costs": 0,
          "direct_costs": 0,
          "pending_costs_changes": 0,
          "projected_costs": 0,
          "forecast_to_complete": 5000,
          "estimated_cost_at_completion": 5000,
          "projected_over_under": 0
        }
      ]
    }


  ]
}

更新

我尝试了以下方法，希望它能起作用，但不...

<ng-container *ngFor="let budget of budgets">

    <ng-container *ngFor="let item of budget.line_items">

      {{item | json}}

  <mat-table [dataSource]="item" matSort (matSortChange)="sortChanged($event)">

Angular 7 Mat-Table，数组中的数组

0 个答案: