[英]Angular 8: How to toggle multiple rows on row click and to expand all rows on a single button click on Angular Material Table?
[英]Expand Angular Material row on click of a button
当我单击按钮时,我试图让我的 Angular 材料数据表在行上展开。 这是我的代码和一个 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>
TS
数据源看起来像这样
[
{
"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 示例在这里
试试这个,希望对你有所帮助。 在您的示例中,首先丢失“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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.