在 Angular 和 mongoose 中创建包含嵌套数据的表

Posted 2023-03-11

【中文标题】在 Angular 和 mongoose 中创建包含嵌套数据的表

【英文标题】：creating a table with nested data in Angular and mongoose

【发布时间】：2020-09-09 23:30:16

【问题描述】：

我试图在 mat-table 中显示嵌套数组字段的内容，但运气不佳。

我有以下代码（在一个名为 employee.component.ts 的文件中）：

  employee: Employee;
  usages: Usage[]; 
  dataSource: MatTableDataSource<Usage>;
  displayedColumns: string[] = ["Asset","endDate","startDate"];
  private employeeId: string;

  constructor(
    public employeesService: EmployeesService,
    public route: ActivatedRoute
  ) 

  ngOnInit() 
    this.route.paramMap.subscribe((paramMap: ParamMap) => 
        this.employeeId = paramMap.get("employeeId");
        this.employeesService.getEmployee(this.employeeId)
        .subscribe(employeeData => 
          this.employee = 
            id: employeeData._id, 
            fullName: employeeData.fullName, 
            department: employeeData.department,
            location: employeeData.location,
            usages:  employeeData.usages,
            startDate: employeeData.startDate,
            endDate: employeeData.endDate,
          ;
          this.dataSource = new MatTableDataSource<Usage>(this.usages);
        );       
    );   
   

使用以下模型：

export interface Employee 
  id: string;
  fullName: string, 
  department: string, 
  location: string,
  startDate: Date,
  endDate: Date,
  usages: String,

创建以下数据输出：

  Employee [  
        "_id": "5ebf58b861930c1268a13e6a",
        "fullName": "Joe Fisher",
        "department": "Accounting",
        "location": "LA",
        "startDate": "2020-05-01T07:00:00.000Z",
        "endDate": null,
        "createdBy": "5eaf2923436e41171dd29bc7",
        "createdDate": "2020-05-16T03:06:32.948Z",
        "usages": [
                "_id": "5ec0c816655ede67bff0711f",
                "employeeId": "5ebf58b861930c1268a13e6a",
                "assetId": "5eb4765e2f3fd40fbfa2cccd",
                "startDate": "2020-05-16T07:00:00.000Z",
                "endDate": "2020-05-31T07:00:00.000Z",
                "createdBy": "5eaf2923436e41171dd29bc7",
                "createdDate": "2020-05-17T05:13:58.378Z",
                "asset": "Surface Pro",
                "id": "5ec0c816655ede67bff0711f"
          ]
    ]

我正在尝试从 Employee 记录中创建一个“usages”数组字段的垫表。但是，使用以下代码（在我的 employee.component.html 文件中），我的 mat-table 中没有收到任何数据。

 <h1> employee.fullName </h1>

<div class="example-container" class="mat-elevation-z2">

  <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z3">

  <ng-container matColumnDef="startDate">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> startDate </th>
    <td mat-cell *matCellDef="let usage of employee.usages">  usage.startDate  </td>
  </ng-container>

  <ng-container matColumnDef="endDate">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> endDate </th>
    <td mat-cell *matCellDef="let usage of employee.usages">  usage.endDate  </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  </table>
</div>

任何想法我要去哪里错了吗？

【参考方案1】：

嘿@afish 实际上我不确定，但尝试修改这个 ligne

this.dataSource = new MatTableDataSource<Usage>(this.usages);

到：

 this.dataSource = new MatTableDataSource<Employee>(this.Employee);

和dataSource: MatTableDataSource<Usage>; 到

dataSource: MatTableDataSource<Employee>;