javascript - Angular2 ngFor - 更改项目顺序而不重新创建它们

Question

我有一个非常具体的场景，我必须将状态存储在通过 ngFor 循环创建的项目组件内部(即，在 Canvas 元素内部)。

在我的列表组件中，我有一个字符串 ID 数组 - 我需要为每个 ID 创建一个 Canvas 元素。之后可能会对 Canvas 数据进行一些操作，因此如果重新创建 Canvas 元素 - 像素数据将会丢失。

但是，有时字符串 ID 的顺序可能会改变，因此，我也想改变 ngFor 呈现这些 Canvas 元素的顺序。无需实际删除它们并重新创建。

我知道，这种情况可能听起来很奇怪，还有一些其他方法可以处理我想要的东西，但目前我只是感兴趣这在 Angular2/4 中是否完全可行？

Answer 1

您可以使用@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"