Angular12中如何获取嵌套数组数据 点击行在模态框展示子数组内容

FIRESTORE JSON数据 #

现有代码 #

ngOnInit({
   this.itemslist=this.firebaseservice.getOrdersItems();
   this.itemslist.subscribe((user)=>{
       this.userlist=user;
       this.dataSource=newMatTableDataSource(this.userlist);
       this.dataSource.paginator = this.paginator;console.log(user);
   })
})

需求说明 #

• 将客户姓名、手机号、邮箱地址等数据展示在一张表格中，WASHITEMLIST（数组）数据则展示在另一张表格中
• 实际需求为：当我点击某一表格行数据时，在模态框的表格内展示该条数据对应的WashItemList数组内容

实现步骤 #

1. 修正现有TS代码 #

修复原有代码的语法笔误：

ngOnInit(): void {
  this.itemslist = this.firebaseservice.getOrdersItems();
  this.itemslist.subscribe((user) => {
    this.userlist = user;
    // 修正实例化MatTableDataSource的空格问题
    this.dataSource = new MatTableDataSource(this.userlist);
    this.dataSource.paginator = this.paginator;
    console.log(user);
  })
}

2. 主表格添加行点击事件（HTML部分） #

给Angular Material表格行绑定点击事件，点击时传递当前行数据：

<!-- 主表格展示客户基础信息 -->
<table mat-table [dataSource]="dataSource" matSort>
  <!-- 客户姓名列 -->
  <ng-container matColumnDef="customerName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> 客户姓名 </th>
    <td mat-cell *matCellDef="let element"> {{element.customerName}} </td>
  </ng-container>
  <!-- 手机号列 -->
  <ng-container matColumnDef="phone">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> 手机号 </th>
    <td mat-cell *matCellDef="let element"> {{element.phone}} </td>
  </ng-container>
  <!-- 邮箱列，其余字段按需添加 -->
  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> 邮箱 </th>
    <td mat-cell *matCellDef="let element"> {{element.email}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <!-- 绑定点击事件，点击行触发模态框打开逻辑 -->
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="openWashItemModal(row)"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

3. 新建模态框组件展示WashItemList #

创建独立模态框组件wash-item-modal.component.ts，接收父组件传递的清洗项目数组：

// wash-item-modal.component.ts
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-wash-item-modal',
  templateUrl: './wash-item-modal.component.html',
})
export class WashItemModalComponent {
  // 子表格展示字段，可按需调整
  displayedColumns = ['itemName', 'price', 'quantity'];
  dataSource: MatTableDataSource<any>;

  constructor(@Inject(MAT_DIALOG_DATA) public data: { washItemList: any[] }) {
    // 初始化子表格数据源
    this.dataSource = new MatTableDataSource(data.washItemList);
  }
}

模态框对应HTML代码wash-item-modal.component.html：

<h2 mat-dialog-title>清洗项目列表</h2>
<mat-dialog-content>
  <table mat-table [dataSource]="dataSource">
    <!-- 按需添加对应字段列 -->
    <ng-container matColumnDef="itemName">
      <th mat-header-cell *matHeaderCellDef> 项目名称 </th>
      <td mat-cell *matCellDef="let element"> {{element.itemName}} </td>
    </ng-container>
    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef> 单价 </th>
      <td mat-cell *matCellDef="let element"> {{element.price}} </td>
    </ng-container>
    <ng-container matColumnDef="quantity">
      <th mat-header-cell *matHeaderCellDef> 数量 </th>
      <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>关闭</button>
</mat-dialog-actions>

4. 主页面添加打开模态框逻辑 #

在原有业务页面的TS文件中注入MatDialog，实现打开模态框的方法：

import { MatDialog } from '@angular/material/dialog';
import { WashItemModalComponent } from './wash-item-modal/wash-item-modal.component';

// 构造器中注入依赖
constructor(private firebaseservice: YourService, private dialog: MatDialog) {}

// 打开模态框的方法
openWashItemModal(row: any): void {
  this.dialog.open(WashItemModalComponent, {
    width: '600px',
    // 传递当前选中行的WashItemList数组
    data: { washItemList: row.WashItemList }
  });
}

内容的提问来源于stack exchange，提问作者Asim Uddin