如何使用 angular material 将对象属性映射为 angular 中嵌套垫 table 中的列？

Question

我在 Angular 中定义了一个接口，如下所示：

export interface User {
  name: string;
  address:string;
  gender:string;
  car: Cars[];
}


export interface Cars {
  id: Number;
  company: CarCompany;
  model: CarModel;
  parts: CarPartName[];
  registrationAndBillingDate: RegistrationAndBillingDate[];
}

export interface RegistrationAndBillingDate {
  id: Number;
  registrationDate: Date;
  billingDate: Date;
}

export class CarCompany {
  id: number;
  name: string;
}

export class CarModel {
  id: number;
  name: string;
}

export class CarPartName {
  id: number;
  name: string;
}

以下是我对用户对象的 JSON 响应：

            {
  "name": "Tony",
  "address": "NYC",
  "gender": "male",
  "cars": [
    {
      "carCompany": {
        "id": 2
      },
      "carModel": {
        "id": 1
      },
      "carParts": [
        {
          "partName": {
            "id": 1
          },
          "available": null
        },
        {
          "partName": {
            "id": 2
          },
          "available": null
        }
      ],
      "carRegistartaionAndBillingDate": [
        {
          "registrationDate": "2022-04-15",
          "billingDate": "2022-04-15"
        }
      ]
    }
  ]
}

对于这些类型的用户，我正在创建一个 table 以在一页中列出所有这些用户，并在嵌套 table 中提供更多信息，如下所示：

Header 将具有来自用户界面的属性，table 内部将具有来自 Cars table 的信息，如下所示：

                       name              address             gender  

  row (when clicked)   Tony               NYC                 male

  nested table        company            model                parts


                     [object]            [object]            [object] //show name insted of object here

我正在尝试创建嵌套垫 table 我能够从用户那里获取姓名、地址和性别，但是对于出现在行上的嵌套 table，单击作为对象出现.我希望在嵌套的 table 中为公司、型号和部件列显示名称属性，而不是在单击对象时。我在 ts 文件中有以下代码：

  dataSource: Observable<[User]>;
  displayedColumns: string[] = ['name', 'address', 'gender'];
  expandedElement: User | null;
  innerDisplayedColumns = ['company', 'model', 'parts'];
  user: UserDataSource[] = [];
  usersData: UserDataSource[] = [];
  dataSource1 = new MatTableDataSource();

  getAllUsersData() {
    this.users.forEach(user => {
      if (user.cars && Array.isArray(user.cars) && user.cars.length) {
        this.usersData= [...this.usersData, { ...user, cars: new MatTableDataSource(user.cars) }];
      } else {
        this.usersData= [...this.usersData, user];
      }
    });
    this.dataSource1 = new MatTableDataSource(this.usersData);
  }
}

在 html 模板中，我有如下代码：

<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
    <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>

    <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
            <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                <div style="align-content: center;" class="example-container mat-elevation-z24">
                    <table #innerTables mat-table #innerSort="matSort" [dataSource]="element.cars" matSort>
                        <ng-container matColumnDef="{{innerColumn}}" *ngFor="let innerColumn of innerDisplayedColumns">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{innerColumn}} </th>
                            <td mat-cell *matCellDef="let element"> {{element[innerColumn]}} </td>
                        </ng-container>
                        <tr mat-header-row *matHeaderRowDef="innerDisplayedColumns"></tr>
                        <tr mat-row *matRowDef="let row; columns: innerDisplayedColumns;"></tr>
                    </table>
                </div>
            </div>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"
        (click)="expandedElement = expandedElement === element ? null : element">
    </tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

那么如何在我的案例名称中映射对象属性来代替内部 table 或嵌套 table 中的对象。我从这个 Stackblitz link 获得了帮助：[https://stackblitz.com/edit/angular-nested-mat-table] 任何形式的帮助或建议将不胜感激。提前致谢。

Answer 1

显示对象的字段代替对象本身非常简单。我们基本上可以访问列中的对象字段，如下所示：

<ng-container *matHeaderRowDef="company">
   <th mat-header-cell *matHeaderCellDef mat-sort-header>Company Name</th>
    <td mat-cell *matCellDef="let element"> {{element.object?.fieldName}} </td>
</ng-container>

我的情况如下：

<ng-container *matHeaderRowDef="company">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Company Name </th>
        <td mat-cell *matCellDef="let element"> {{element.company?.name}} </td>
    </ng-container>

我希望它对遇到同样问题的其他人有所帮助。谢谢。

如何使用 angular material 将对象属性映射为 angular 中嵌套垫 table 中的列？

How to map object property as a column in nested mat table in angular using angular material?

typescript

angular-material

angular

如何使用 angular material 将对象 属性 映射为 angular 中嵌套垫 table 中的列？

How to map object property as a column in nested mat table in angular using angular material?

typescript

angular-material

angular

如何使用 angular material 将对象属性映射为 angular 中嵌套垫 table 中的列？