angular - 在ngFor Angular 8+中反转数组项而不更改数组索引的简单管道?
问题描述
如何在不改变数组中元素位置的情况下反转,应该只用管道更新视图
我可以使用array.reverse()
,但是将第一项放在最后,依此类推,因此元素索引会更改
这是我被困在的stackblitz代码
import { Component } from '@angular/core';
export interface Order {
value: string;
viewValue: string;
}
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {
transform(value: any[], arg: string): any {
console.log('value', value);
console.log('args', arg);
if (arg === 'desc') {
return value.reverse();
}
if (arg === 'asc') {
return value;
}
}
}
/**
* @title Basic select
*/
@Component({
selector: 'select-overview-example',
template: `<h4>Basic mat-select</h4>
<mat-form-field>
<mat-label>Sort Order</mat-label>
<mat-select value='asc'>
<mat-option *ngFor="let order of orders" (click)="changeOrder(order.value)" [value]="order.value">
{{order.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<ul>
<li *ngFor="let item of items| orderBy : sort; index as i">{{i}} -> {{item}}</li>
</ul>`,
styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
orders: Order[] = [
{ value: 'asc', viewValue: 'Ascending' },
{ value: 'desc', viewValue: 'Descending' }
];
items: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
sort: string = 'asc';
changeOrder(val: string) {
console.log('val', val);
this.sort = val;
}
}
解决方案
我们的主要问题是仅以相反的顺序更改视图。所以不需要更新逻辑。只更新 CSS。
如果项目是使用 flex-box CSS 显示的,那么我们可以使用flex-direction
属性来反转它。
flex-direction : row;
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;
如果项目使用 UL 和 LI 显示,则在 css 下方应用逆序。如下所示:
ul {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
ul > li {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
推荐阅读
- sql-server - SQL Server 中的表更新减慢子查询中的索引查找
- c# - C#:为嵌入文档中的属性创建索引
- ios - 当我们滑动时,单元格保持突出显示并以交互方式取消突出显示
- pyspark - 如何在 pyspark 中捕获错误
- angular - 如何在Angular中将数据从组件解析到Guard
- spring-boot - RestController 集成测试 Junit5 错误
- docker - 无法从公共 docker hub 拉取图像
- php - 发送密码重置电子邮件并收到错误
- mysql - 如何从 .ibd、ibdata1、ib_logfile0 或 mysql.ibd 文件恢复 mysql 数据库
- r - 最初不在下拉列表中显示值