单击按钮展开 Angular Material 行答案

【问题标题】：Expand Angular Material row on click of a button单击按钮展开 Angular Material 行
【发布时间】：2020-11-15 08:39:18
【问题描述】：

当我单击按钮时，我试图让我的 Angular Material 数据表在行上展开。这是我的代码和一个 stackblitz 示例。目前它在列内展开，但我试图在用户单击切换按钮时展开行。

HTML

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">    
  <ng-container matColumnDef="title">
    <th mat-header-cell *matHeaderCellDef> Title </th>
    <td mat-cell *matCellDef="let element"> {{element.title}} </td>
  </ng-container>

  <ng-container matColumnDef="location">
    <th mat-header-cell *matHeaderCellDef> City </th>
    <td mat-cell *matCellDef="let element"> {{element.location.city}} </td>
  </ng-container>

  <ng-container matColumnDef="startDate">
    <th mat-header-cell *matHeaderCellDef> Start Date </th>
    <td mat-cell *matCellDef="let element"> {{element.startDate}} </td>
  </ng-container>

  <ng-container matColumnDef="deviceType">
    <th mat-header-cell *matHeaderCellDef> Device Type </th>
    <td mat-cell *matCellDef="let element"> {{element.deviceType}} </td>
  </ng-container>

  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td mat-cell *matCellDef="let element"> {{element.status}} </td>
  </ng-container>

  <ng-container matColumnDef="expand">
    <th mat-header-cell *matHeaderCellDef> View More </th>
    <td mat-cell *matCellDef="let element; let i = index">
      <div class="example-element-detail" (click)="toggleFloat(i)">View</div>
      <div *ngIf="expanded[i] == true"> {{element.contributorProfiles}} </div>
    </td>
  </ng-container>

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

数据源看起来像这样

[
  {
    "title": "bob",
    "codes": [
      "Basketball"
    ],
    "description": null,
    "brief": "asdas",
    "locationId": "9614632c-d64d-4bf3-bb8f-5c38919f221c",
    "startDate": "2020-07-08T00:00:00.000+0000",
    "endDate": "2020-07-10T23:00:00.000+0000",
    "submissionDueDate": "2020-08-26T23:59:59.000+0000",
    "workAcceptanceDate": "2020-08-26T23:59:59.000+0000",
    "deviceType": "Photography",
    "photography": {
      "minimumDpi": 300,
      "shortestSideLength": 2800
    },
    "videography": null,
    "fees": 22,
    "accreditationRequired": false,
    "accreditationReason": null,
    "subjects": "test",
    "editors": null,
    "additionalEditorInformation": null,
    "imageId": null,
    "id": "b6b99931-c6a3-476a-8c3a-9e2535823c13",
    "status": "Created",
    "createdBy": {
      "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
      "email": "bhavic@a.com",
      "firstname": "Bhavic",
      "surname": "Naran",
      "cell": null,
      "status": "ACTIVE",
      "requestedOn": null
    },
    "location": {
      "id": "9614632c-d64d-4bf3-bb8f-5c38919f221c",
      "country": "Bhutan",
      "city": "Lhuentse"
    },
    "editorProfiles": [
      {
        "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
        "email": "bhavic@a.com",
        "firstname": "Bhavic",
        "surname": "Naran",
        "cell": null,
        "status": "ACTIVE",
        "requestedOn": null
      }
    ],
    "contributorProfiles": []
  },
  {
    "title": "tester kalpesh",
    "codes": [
      "Basketball"
    ],
    "description": null,
    "brief": "123",
    "locationId": "aec466d9-9fb6-4718-9b1f-5fad429f7145",
    "startDate": "2020-06-24T00:00:00.000+0000",
    "endDate": "2020-07-03T23:00:00.000+0000",
    "submissionDueDate": "2020-08-26T23:59:59.000+0000",
    "workAcceptanceDate": "2020-08-26T23:59:59.000+0000",
    "deviceType": "Photography",
    "photography": {
      "minimumDpi": 300,
      "shortestSideLength": 2800
    },
    "videography": null,
    "fees": 55,
    "accreditationRequired": false,
    "accreditationReason": "none",
    "subjects": "55",
    "editors": null,
    "additionalEditorInformation": null,
    "imageId": null,
    "id": "3fdf9972-9b21-4a6e-b650-4141f5c6809e",
    "status": "Assigned",
    "createdBy": {
      "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
      "email": "bhavic@a.com",
      "firstname": "Bhavic",
      "surname": "Naran",
      "cell": null,
      "status": "ACTIVE",
      "requestedOn": null
    },
    "location": {
      "id": "aec466d9-9fb6-4718-9b1f-5fad429f7145",
      "country": "South Africa",
      "city": "Johannesburg"
    },
    "editorProfiles": [
      {
        "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
        "email": "bhavic@a.com",
        "firstname": "Bhavic",
        "surname": "Naran",
        "cell": null,
        "status": "ACTIVE",
        "requestedOn": null
      }
    ],
    "contributorProfiles": [
      {
        "id": "95ac8466-8d98-47ab-95f8-24eb7b7cc27b",
        "email": "kalpesh@mithal.co.za",
        "firstname": "Kalpesh",
        "surname": "Mithal",
        "cell": "0884441122",
        "appliedStatus": "Created"
      }
    ]
  }
]

Stackblitz 示例在这里

https://stackblitz.com/edit/angular-hvcf5z

【问题讨论】：

标签： angular angular-material angular-material-table

【解决方案1】：

试试这个，希望对你有所帮助。在您的示例中，首先丢失了“multiTempalteDataRows” 第二个列定义使用这个

displayedColumns = ['title','location','startDate','deviceType','status', 'more'];

最后添加第三行了解详情

<tr mat-row *matRowDef="let row; columns: ['expanded']" class="example-detail-row"></tr>

HTML

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>

  <ng-container matColumnDef="title">
    <th mat-header-cell *matHeaderCellDef> Title </th>
    <td mat-cell *matCellDef="let element"> {{element.title}} </td>
  </ng-container>

  <ng-container matColumnDef="location">
    <th mat-header-cell *matHeaderCellDef> City </th>
    <td mat-cell *matCellDef="let element"> {{element.location.city}} </td>
  </ng-container>

  <ng-container matColumnDef="startDate">
    <th mat-header-cell *matHeaderCellDef> Start Date </th>
    <td mat-cell *matCellDef="let element"> {{element.startDate}} </td>
  </ng-container>

  <ng-container matColumnDef="deviceType">
    <th mat-header-cell *matHeaderCellDef> Device Type </th>
    <td mat-cell *matCellDef="let element"> {{element.deviceType}} </td>
  </ng-container>

  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td mat-cell *matCellDef="let element"> {{element.status}} </td>
  </ng-container>

  <ng-container matColumnDef="more">
    <th mat-header-cell *matHeaderCellDef> More </th>
    <td mat-cell *matCellDef="let element"> <button (click)="expanded = expanded === element ? null : element">More</button> </td>
  </ng-container>

<ng-container matColumnDef="expanded">
   <td mat-cell *matCellDef="let element">
      <div class="example-element-detail" [@detailExpand]="element == expanded ? 'expanded' : 'collapsed'">
          <span> this is your incredible expandable details </span>
          </div>
    </td>
</ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  <tr mat-row *matRowDef="let row; columns: ['expanded']" class="example-detail-row"></tr>
</table>

【讨论】：