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

我对您的问题的理解是，您有一个有关组，规则和标题的字典。其中，规则是字典数组，您想遍历该字典并将其打印在表中。因此，这就是您的数据源的样子：

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>

Answer 2

如果要遍历给定数据中的每个规则，则可以使用嵌套表。我已经使用角度材料click here

为嵌套表创建了一些代码

角材料表遍历项目数组

2 个答案: