单击按钮展开 Angular Material 行
Expand Angular Material row on click of a button
我试图在单击按钮时使我的 Angular Material 数据 table 在行中展开。这是我的代码和一个 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>
我试图在单击按钮时使我的 Angular Material 数据 table 在行中展开。这是我的代码和一个 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>