angular material table 遍历项目数组

Question

我尝试在 Mat-table 我的数据中打印。

我非常接近，但我无法完成我的前端。

我的数据是：

0: {Group: 1, Rules: Array(1), Title: "NAME"}
1: {Group: 2, Rules: Array(2), Title: "TERRITORY"}

And the array for Group 1 have rules like this (and so on for Group 2):
0: {Date: "1990-01-01", NewRules: 0, Rules: "Ligue Name", Id: 1}
1: {Date: "1990-01-01", NewRules: 1, Rules: "Other rules", Id: 2}

这是 .html 代码：

<mat-card-content>
  <table mat-table [dataSource]="rules$ | async" class="mat-elevation-z8">

    <!-- DateModifier Column -->
    <ng-container matColumnDef="Date">
      <th mat-header-cell *matHeaderCellDef>Date</th>
      <td mat-cell *matCellDef="let element">
        {{ element.Reules[0].Date }}
      </td>
    </ng-container>

    <!-- Reglement Column -->
    <ng-container matColumnDef="Rules">
      <th mat-header-cell *matHeaderCellDef>Rule</th>
      <td mat-cell *matCellDef="let element">
        {{ element.Rules[0].Rules }}
      </td>
    </ng-container>

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

我得到的没问题如果我指定：element.Rules[0].Rules

但是我想遍历数组的每一项。

给予一些东西

Date       Rules

1990/1/1  Ligue Name

1990/1/1  Other Rules

另外，如果你也能给我这个提示。如何在所有规则之前为每个组打印标题？

Group : NAME

Date       Rules

1990/1/1  Ligue Name

1990/1/1  Other Rules

Group: TERRITORY
 etc....

文件.ts:

import { Component, OnInit, Input } from "@angular/core";
import { Reglements } from "../models/models";
import { MatDialog } from "@angular/material";
import { FirebaseService } from "../service/firebase.service";
import { Observable } from "rxjs";

@Component({
  selector: "app-reglements",
  templateUrl: "./reglements.component.html",
  styleUrls: ["./reglements.component.css"]
})
export class ReglementsComponent implements OnInit {
  displayedColumns: string[] = ["Date", "Rules"];

  @Input()
  // public boardDirection: AngularFireList<Direction[]>;
  public reglements$: Observable<Reglements[]>;

  constructor(
    private dialog: MatDialog,
    private firebaseService: FirebaseService
  ) {
    this.reglements$ = firebaseService.loadAllRules();
    this.reglements$.forEach(element => {
      console.log("eleem", element);
    });
  }

  ngOnInit() {}
}

谢谢

Answer 1

如果您想遍历给定数据中的每个规则，您可以使用嵌套 table。我使用 angular material click here

为嵌套 table 创建了一些代码

Answer 2

我在你的问题中的理解是你有一个组、规则和标题的字典。其中，rules 是一个字典数组，你想遍历那个字典并在 table 中打印它。所以，这就是您的数据源的样子：

dataSource = [
               {group: 1, rules: [{'date': '2019-1-31', 'rules': 'Some Rule', id: 1}, {'date': '2019-1-27', 'rules': 'Some Rule', id: 2}], title: 'name'},
               {group: 2, rules: [{'date': '2019-1-31', 'rules': 'Some Rule', id: 1}, {'date': '2019-1-27', 'rules': 'Some Rule', id: 2}], title: 'TERRITORY'}
             ]

修改代码后：

 <table mat-table [dataSource]="dataSource">
     <ng-container matColumnDef="yourColName">
       <th mat-header-cell *matHeaderCellDef>Group</th>
       <td mat-cell *matCellDef="let element">
           {{element.group}}
       </td>
     </ng-container>
     <ng-container matColumnDef="yourColName">
       <th mat-header-cell *matHeaderCellDef>Rules Array Object</th>
       <td mat-cell *matCellDef="let element">
          <!--THIS IS WHERE YOU ARE ITERATING THROUGH ARRAY OF RULES OBJECT-->
           <ng-container *ngFor="let rule of element.rules">
               {{ rule.date}}, {{rule.rules}}, {{rule.id}}
           </ng-container>
       </td>
     </ng-container>
 </table>

angular material table 遍历项目数组

angular material table loop through item array

angular-material

angular

mat-table