angular - 按内部 *ngFor 中的属性对整个 *ngFor 进行排序
问题描述
使用 Angular,我创建了一个使用两个*ngFor
表达式的表。我创建了一个允许基于对象属性进行排序/排序的管道。但是,我不知道如何或是否可以根据内部 *ngFor 中的属性对外部 *ngFor 进行排序。
这是我正在使用的 HTML:
<table *ngIf="option == 'Document Type'">
<tr>
<th class="modalheader">Sources</th>
<th class="modalheader">Systems</th>
</tr>
<table *ngFor="let doctype of doctypes | sort: 'source.Title'" style="width: 200%; margin-top: 0px;">
<tr *ngFor="let source of doctype.Source;">
<td style="width:50%;">{{source.Title}}</td>
<td>
{{doctype.System.Title}}
</td>
</tr>
</table>
</table>
我附上了一个带有实际数据的示例,我的管道用于排序。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sort'
})
export class SortPipe implements PipeTransform {
transform(array: any[], field: string): any[] {
array.sort((a: any, b: any) => {
if (a[field] < b[field]) {
return -1;
} else if (a[field] > b[field]) {
return 1;
} else {
return 0;
}
});
return array;
}
}
.modalheader {
background-color: #00539B;
color: white !important;
padding-left: 5px;
margin-bottom: 10px;
/* REVIEW: ADDED FOR TABLE */
font-size: 1.46em;
font-weight: 300;
width: 50%;
}
.docs {
width: 99%;
/* margin-top: 25px; */
margin-top: 20px;
}
table {
width: 100%;
margin-top: 5px;
}
<table>
<tr>
<th class="modalheader">Sources</th>
<th class="modalheader">Systems</th>
</tr>
<table style="width: 200%; margin-top: 0px;">
<tr>
<td style="width:25%;">Lafayette Savings Bank</td>
<td>
Nautilus
</td>
</tr>
</table>
<table style="width: 200%; margin-top: 0px;">
<tr>
<td style="width:25%;">United Bancorp</td>
<td>
Nautilus
</td>
</tr>
</table>
<table style="width: 200%; margin-top: 0px;">
<tr>
<td style="width:25%;">Old National</td>
<td>
FIS
</td>
</tr>
</table>
</table>
这可能吗?如果可以,怎么做?
解决方案
推荐阅读
- javascript - 如何操作带有附加了jquery的id属性的行
- sql - 使用查询创建 SQL XML
- c++ - 在成为指向基类的指针后如何保留对子类方法的使用?
- php - PHP / JSON:我如何知道 JSON 数据是否为空?
- java - Tomcat 在会话故障转移事件期间注销用户并重新启动
- reactjs - 在状态转换错误期间无法更新 - 导航到另一个屏幕时使用钩子做出本机反应
- google-kubernetes-engine - 如何使用 stackdriver 监控 GKE 集群 PODS 中的 JVM 堆内存
- python - 为什么颜色条不能与热图熔断器一起使用来散射?
- react-native - 使用 Visual Studio Code 中的特定注释使代码在自定义位置可折叠?
- scheme - BiwaScheme - 为什么在其主体中带有 call/cc 的无参数函数在调用时突然需要一个参数?