hi，我也想将Angular排序到嵌套表。 目前，排序仅适用于主表，不适用于内部表。
我正在使用可扩展表格。并且另一个表也有排序，但是它没有对任何东西进行排序。 我正在添加ts和html文件的代码。 我什至尝试使用console.log排序变量，但显示主表头不是当前表头。
export class GoalTableComponent implements OnInit, OnDestroy {
displayedColumns: string[] = [
'description',
'due_date',
'metric_current',
'created',
'completed'
];
actionColumns: string[] = [
'description',
'priority',
'due_date',
'start_date',
'end_date',
'status',
'completed'
];
dataSource: MatTableDataSource<GoalsModel>;
actionSource: MatTableDataSource<ActionsModel>;
expandedElement: GoalsModel | null;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatSort, { static: false }) actionSort: MatSort;
ngOnInit() {
this.getGoalTitle();
}
getActionLists(id) {
this.actionService.getActionOfGoal(id).subscribe(actions => {
if (!actions.status) {
this.openSnackBar('Error in fetching Data. Please refresh and try again.');
}
let count = 1;
actions.data.map(action => {
if (count === 11) {
return;
}
const actionData = {
id: action.id,
priority: action.priority,
description: action.description,
due_date: action.due_date,
start_date: action.start_date,
end_date: action.end_date,
completed: action.completed
};
this.actionsData.push(actionData);
count++;
});
this.actionSource = new MatTableDataSource(this.actionsData);
this.actionSource._updateChangeSubscription();
console.log(this.actionSort);
this.actionSource.sort = this.actionSort;
this.noData = this.actionSource.data.length;
});
}
getGoalsList() {
this.isLoadingResults = false;
this.dateNow.setDate(this.dateNow.getDate() - 1);
this.goalSub = this.goalService.getUserGoals().subscribe(goals => {
goals.data.map((goal: any) => {
const dueDate = new Date(goal.due_date);
const dateCreate = new Date(goal.createdAt);
const goalComplete = goal.completed;
const goalsList = {
id: goal.id,
title: goal.description,
lifeArea: goal.lifeAreaId,
passion: goal.passionId,
purpose: goal.purposeId,
topValue: goal.topValueId,
};
this.userGoals.push(goalsList);
if (this.dataCategory === 'all') {
const userGoal = {
id: goal.id,
description: goal.description,
due_date: dueDate,
lifeArea: goal.lifeAreaId ? this.categoryMergeData.lifeAreas[parseInt(goal.lifeAreaId, 10)] : '',
passion: goal.passionId ? this.categoryMergeData.passions[parseInt(goal.passionId, 10)] : '',
purpose: goal.purposeId ? this.categoryMergeData.purposes[parseInt(goal.purposeId, 10)] : '',
topValue: goal.topValueId ? this.categoryMergeData.topValues[parseInt(goal.topValueId, 10)] : '',
metric: goal.metric,
metric_target: goal.metric_target,
metric_current: goal.metric_current,
created: dateCreate,
completed: goalComplete
};
this.goalsData = [...this.goalsData, userGoal];
}
this.goalsData = [...this.goalsData, userGoal];
}
});
this.dataSource = new MatTableDataSource(this.goalsData);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.isLoadingResults = false;
});
}
}
<div class="goalTopSection" *ngIf="showFilter">
<mat-form-field class="full-width" appearance="outline">
<mat-label>Search</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" />
</mat-form-field>
<button class="buttonGoal" mat-flat-button color="all-goals" (click)="openDialog(null)">
Add New Goal
</button>
</div>
<div class="sectionTitle" *ngIf="!showFilter">
<h3>{{ title }}</h3>
<p class="rightTitle">
<button class="gotoGoals" mat-flat-button [color]="color" (click)="gotoGoals()">
Goto Goals
</button>
<button class="buttonGoal" mat-flat-button [color]="color" (click)="openDialog()">
Add New Goal
</button>
</p>
</div>
<div class="mat-spinner-goals" *ngIf="isLoadingResults">
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
</div>
<div class="goal-content-wrapper">
<div class="mat-goal-table">
<table mat-table matSort [dataSource]="dataSource" multiTemplateDataRows>
<!-- ID Column -->
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
<td mat-cell *matCellDef="let row" data-label="Description">{{ row.description }}</td>
</ng-container>
<!-- Progress Column -->
<ng-container matColumnDef="due_date">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Due Date</th>
<td mat-cell *matCellDef="let row" data-label="Due Date">
<span
[ngClass]="{
overDueAction: dateNow >= row.due_date && !row.completed,
pendingAction: dateNow <= row.due_date && !row.completed,
completedAction: row.completed
}"
>{{ row.due_date | date }}</span
>
</td>
</ng-container>
<!-- Color Column -->
<ng-container
matColumnDef="lifeArea"
*ngIf="dataCategory === 'lifearea' || dataCategory === 'all'"
>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Life Area</th>
<td mat-cell *matCellDef="let row" data-label="Life Area">{{ row.lifeArea }}</td>
</ng-container>
<!-- Color Column -->
<ng-container
matColumnDef="passion"
*ngIf="dataCategory === 'userPassions' || dataCategory === 'all'"
>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Passion</th>
<td mat-cell *matCellDef="let row" data-label="Passions">{{ row.passion }}</td>
</ng-container>
<!-- Color Column -->
<ng-container
matColumnDef="purpose"
*ngIf="dataCategory === 'userPurpose' || dataCategory === 'all'"
>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Purpose</th>
<td mat-cell *matCellDef="let row" data-label="Purposes">{{ row.purpose }}</td>
</ng-container>
<!-- Color Column -->
<ng-container
matColumnDef="topValue"
*ngIf="dataCategory === 'usertop-value' || dataCategory === 'all'"
>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Top Value</th>
<td mat-cell *matCellDef="let row" data-label="Top Values">{{ row.topValue }}</td>
</ng-container>
<!-- Name Column -->
<!-- <ng-container matColumnDef="metric">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Metric</th>
<td mat-cell *matCellDef="let row" data-label="Metric">{{ row.metric === 'percentage' ? '%' : row.metric | titlecase }}</td>
</ng-container> -->
<!-- Color Column -->
<!-- <ng-container matColumnDef="metric_target">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Metric Target</th>
<td mat-cell *matCellDef="let row" data-label="Metric Target">{{row.metric_target}}</td>
</ng-container> -->
<!-- Color Column -->
<ng-container matColumnDef="metric_current">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Actions</th>
<td mat-cell *matCellDef="let row" data-label="Actions">
{{ row.metric_current ? row.metric_current : 0 }}
</td>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="completed">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
<td mat-cell *matCellDef="let row" data-label="Completed">
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 90 25"
style="enable-background:new 0 0 90 25;"
xml:space="preserve"
>
<g class="st0 overDue" *ngIf="dateNow >= row.due_date && !row.completed">
<g class="st5">
<path
class="overDueBackground"
d="M68,24H12C5.37,24,0,18.63,0,12v0C0,5.37,5.37,0,12,0l56,0c6.63,0,12,5.37,12,12v0C80,18.63,74.63,24,68,24z"
/>
<text transform="matrix(1 0 0 1 22.9857 15.2563)" class="goalTextSvg">Overdue</text>
<g>
<path
class="overDueIconBackground"
d="M14.09,13.14L13.45,8h2.78l-0.66,5.14H14.09z M13.69,16v-2.15h2.3V16H13.69z"
/>
</g>
</g>
</g>
<g class="st0 pending" *ngIf="dateNow <= row.due_date && !row.completed">
<g class="st5">
<path
class="pendingBackground"
d="M68.12,20h-56C6.17,20,1.25,15.67,0.3,10c-0.11,0.65-0.18,1.32-0.18,2c0,6.63,5.37,12,12,12h56
c6.63,0,12-5.37,12-12c0-0.68-0.07-1.35-0.18-2C78.99,15.67,74.06,20,68.12,20z"
/>
<path
class="pendingBackground"
d="M68,24H12C5.37,24,0,18.63,0,12v0C0,5.37,5.37,0,12,0l56,0c6.63,0,12,5.37,12,12v0C80,18.63,74.63,24,68,24z"
/>
<text transform="matrix(1 0 0 1 22.9857 15.4356)" class="goalTextSvg">Pending</text>
<g>
<path
class="pendingIconColor"
d="M12.06,15.39c0.08-1,0.63-1.69,1.36-2.25c0.15-0.11,0.29-0.23,0.43-0.35c0.17-0.15,0.32-0.31,0.48-0.47
c0.1-0.1,0.1-0.19,0-0.28c-0.28-0.25-0.55-0.52-0.84-0.75c-0.54-0.44-1.04-0.9-1.27-1.58c-0.08-0.23-0.12-0.46-0.19-0.72
c-0.13,0-0.28,0.01-0.42,0c-0.22-0.02-0.38-0.18-0.38-0.39c0-0.21,0.15-0.37,0.37-0.4c0.06-0.01,0.11,0,0.17,0
c2.04,0,4.08,0,6.12,0c0.06,0,0.13,0,0.19,0.01c0.21,0.03,0.35,0.19,0.35,0.39c0,0.2-0.14,0.37-0.35,0.39
c-0.14,0.01-0.29,0-0.45,0c-0.03,0.14-0.05,0.27-0.08,0.4c-0.16,0.71-0.58,1.25-1.13,1.71c-0.35,0.29-0.68,0.6-1.03,0.9
c-0.16,0.14-0.15,0.28,0.01,0.41c0.29,0.26,0.58,0.53,0.88,0.77c0.69,0.55,1.21,1.21,1.32,2.12c0,0.03,0.02,0.06,0.04,0.11
c0.13,0,0.27-0.01,0.4,0c0.24,0.01,0.39,0.18,0.39,0.4c-0.01,0.21-0.16,0.36-0.38,0.38c-0.06,0.01-0.13,0-0.19,0
c-2.02,0-4.03,0-6.05,0c-0.08,0-0.16,0-0.24-0.01c-0.2-0.03-0.35-0.2-0.34-0.4c0.01-0.21,0.12-0.35,0.33-0.38
C11.73,15.38,11.88,15.39,12.06,15.39z M12.87,15.37c1.33,0,2.62,0,3.94,0c-0.06-0.47-0.24-0.87-0.58-1.17
c-0.45-0.41-0.92-0.81-1.39-1.21c-0.46,0.39-0.92,0.77-1.36,1.17C13.14,14.48,12.93,14.87,12.87,15.37z M14.84,11.37
c0.27-0.23,0.55-0.46,0.81-0.69c0.26-0.23,0.52-0.45,0.75-0.7c0.25-0.27,0.37-0.61,0.41-0.99c-1.32,0-2.62,0-3.93,0
c0.05,0.52,0.29,0.94,0.66,1.27C13.96,10.63,14.4,10.99,14.84,11.37z"
/>
</g>
</g>
</g>
<g id="Layer_3" class="Completed" *ngIf="row.completed">
<g>
<path
class="completedBackground"
d="M68.06,24h-56c-6.63,0-12-5.37-12-12v0c0-6.63,5.37-12,12-12l56,0c6.63,0,12,5.37,12,12v0
C80.06,18.63,74.69,24,68.06,24z"
/>
<text transform="matrix(1 0 0 1 22.9266 15.856)" class="goalTextSvg">
Completed
</text>
<g>
<path
class="completedIcon"
d="M14.78,17.38c-0.54,0-1.08,0-1.63,0c-1.17,0-2.17-0.85-2.34-2.01c-0.05-0.32-0.03-0.64-0.03-0.96
c0-0.88,0-1.75,0-2.63c0-1.16,0.77-2.12,1.91-2.35c0.16-0.03,0.32-0.04,0.48-0.04c1.08,0,2.15,0,3.23,0c1.18,0,2.16,0.83,2.35,2
c0.02,0.13,0.03,0.26,0.03,0.4c0,1.07,0,2.14,0,3.2c0,1.19-0.79,2.15-1.96,2.36c-0.13,0.02-0.27,0.03-0.4,0.04
C15.87,17.38,15.33,17.38,14.78,17.38z M14.78,16.38C14.78,16.38,14.78,16.38,14.78,16.38c0.54,0,1.07,0,1.61,0
c0.8,0,1.39-0.6,1.39-1.4c0-1.08,0-2.15,0-3.23c0-0.77-0.6-1.37-1.38-1.38c-1.09,0-2.19,0-3.28,0c-0.73,0-1.34,0.61-1.35,1.35
c0,1.1,0,2.19,0,3.29c0,0.14,0.02,0.28,0.06,0.42c0.17,0.57,0.69,0.95,1.31,0.96C13.7,16.39,14.24,16.38,14.78,16.38z"
/>
<path
class="completedIcon"
d="M14.28,15.38c-0.18-0.18-0.36-0.36-0.54-0.54c-0.38-0.38-0.76-0.75-1.13-1.13
c-0.15-0.15-0.19-0.37-0.11-0.56c0.08-0.19,0.27-0.3,0.49-0.29c0.13,0.01,0.24,0.06,0.34,0.16c0.29,0.29,0.58,0.58,0.87,0.87
c0.03,0.03,0.05,0.05,0.08,0.09c0.06-0.07,0.11-0.13,0.16-0.19c0.66-0.8,1.33-1.6,1.99-2.4c0.19-0.24,0.5-0.27,0.73-0.08
c0.21,0.18,0.22,0.5,0.03,0.73c-0.94,1.09-1.89,2.18-2.83,3.27C14.33,15.32,14.31,15.35,14.28,15.38z"
/>
</g>
</g>
</g>
</svg>
</td>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="created">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
<td mat-cell *matCellDef="let row" data-label="Created">{{ row.created | date }}</td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail" *ngIf="EditSlider">
<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
<div
class="goal-edit-details"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'"
>
<h3 class="actionListTitle">Actions</h3>
<table mat-table [dataSource]="actionSource" matSort class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="no">
<th mat-header-cell *matHeaderCellDef mat-sort-header>No.</th>
<td mat-cell *matCellDef="let element; let i = index;">{{ i + 1 }}</td>
</ng-container>
<!-- Action Description Column -->
<ng-container matColumnDef="priority">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Priority</th>
<td mat-cell *matCellDef="let element">{{ element.priority | titlecase }}</td>
</ng-container>
<!-- Action Description Column -->
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Action Description</th>
<td mat-cell *matCellDef="let element">{{ element.description }}</td>
</ng-container>
<!-- Due Date Column -->
<ng-container matColumnDef="due_date">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Due Date</th>
<td mat-cell *matCellDef="let element">{{ element.due_date | date }}</td>
</ng-container>
<!-- Start Date Column -->
<ng-container matColumnDef="start_date">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Start Date</th>
<td mat-cell *matCellDef="let element">{{ element.start_date | date }}</td>
</ng-container>
<!-- End Date Column -->
<ng-container matColumnDef="end_date">
<th mat-header-cell *matHeaderCellDef mat-sort-header>End Date</th>
<td mat-cell *matCellDef="let element">{{ element.end_date | date }}</td>
</ng-container>
<!-- End Date Column -->
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
<td mat-cell *matCellDef="let element">
{{ element.completed ? 'Completed' : ((dateNow | date) > (element.start_date | date) && (dateNow |date) < (element.due_date | date)) ? 'Started' : (element.due_date | date) < (dateNow | date) ? 'Over Due' : 'Pending' }}
</td>
</ng-container>
<!-- completed Column -->
<ng-container matColumnDef="completed">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Completed</th>
<td mat-cell *matCellDef="let element; let i = index;">
<mat-checkbox [checked]="element.completed" (change)="onActionComplete($event, element.id, i)"></mat-checkbox>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="actionColumns"></tr>
<tr mat-row *matRowDef="let row; columns: actionColumns"></tr>
</table>
<p *ngIf="noData === 0" class="noData">No Action found.</p>
<div class="goal-edits-buttons">
<div class="buttonLeft">
<button mat-raised-button color="primary" (click)="openDialog(element.id)">
Edit Goal
</button>
<button
mat-raised-button
color="warn"
(click)="deleteConfirm(element.id, element.description)"
>
Delete Goal
</button>
</div>
<div class="buttonRight">
<button mat-raised-button color="green" (click)="addAction(element.id)">
Add Action
</button>
<a mat-raised-button color="accent" [routerLink]="'/actions/all-actions'"
>View Actions</a>
</div>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<ng-container *ngIf="!EditSlider">
<tr
mat-row
*matRowDef="let element; columns: displayedColumns"
[ngClass]="{
actionOverDue: dateNow > element.due_date,
'goals-element-row': true,
actionComplete: element.completed
}"
></tr>
</ng-container>
<ng-container *ngIf="EditSlider">
<tr
mat-row
*matRowDef="let element; columns: displayedColumns"
[ngClass]="{
actionOverDue: dateNow > element.due_date,
'goals-element-row': true,
actionComplete: element.completed
}"
[class.goals-expanded-row]="expandedElement === element"
(click)="
expandedElement = expandedElement === element ? null : element;
expandedElement === element ? getActionLists(element.id) : null
"
></tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="goals-detail-row"></tr>
</ng-container>
</table>
</div>
<mat-paginator [pageSizeOptions]="[20, 30, 40, 50]"></mat-paginator>
</div>