我有一个非常具体的场景,我必须将状态存储在通过 ngFor 循环创建的项目组件内部(即,在 Canvas 元素内部)。
在我的列表组件中,我有一个字符串 ID 数组 - 我需要为每个 ID 创建一个 Canvas 元素。之后可能会对 Canvas 数据进行一些操作,因此如果重新创建 Canvas 元素 - 像素数据将会丢失。
但是,有时字符串 ID 的顺序可能会改变,因此,我也想改变 ngFor 呈现这些 Canvas 元素的顺序。无需实际删除它们并重新创建。
我知道,这种情况可能听起来很奇怪,还有一些其他方法可以处理我想要的东西,但目前我只是感兴趣这在 Angular2/4 中是否完全可行?
最佳答案
您可以使用@Pipe
管理对象,您只需将管道添加到您的代码中,例如:
*ngFor="let field of formFields | keys"
keys
是一个@Pipe。
查看本教程以创建自定义 @Pipe
:https://scotch.io/tutorials/create-a-globally-available-custom-pipe-in-angular-2
由于您没有发布任何代码,我假设您已经准备好“更改对象内元素的顺序”功能。
因此,您可以像这样构建您的@Pipe
:
@Pipe({name: 'alterOrder'})
export class AlterOrderPipe implements PipeTransform {
transform(value, args: string[]): any {
let myArray = [];
for (let elem in value) {
if (!isNullOrUndefined(elem)) {
// Alter order functionality
myArray.push(alteredOrderObj); // alteredOrderObj would be the result of your functionality
}
}
return myArray;
}
}
在您的代码中,您可以这样使用它:
*ngFor="让 myArray 的元素 | alterOrder"
关于javascript - Angular2 ngFor - 更改项目顺序而不重新创建它们,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43680315/