Question

我有一个非常具体的场景，我必须将状态存储在通过ngFor循环创建的item-components（即canvas元素内）中。

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

但是，有时字符串ID的顺序可能会改变，因此，我还想更改ngFor渲染这些画布元素的顺序。没有实际删除它们并再次创建。

我知道，这种情况可能听起来很奇怪，并且还有一些其他方法可以处理我想要的东西，但目前我只是感兴趣，如果在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

由于您没有发布任何代码，我认为您已经在对象中更改了元素的顺序＆＃34;功能准备就绪

所以，你可以像这样构建你的@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="let elem of myArray | alterOrder"

Answer 2

听起来您想要在视觉上重新排序元素但不能重新渲染它们吗？我相信如果你不想重新渲染元素但希望它们以不同的视觉顺序呈现，那么你最好的选择是CSS。也许使用angular来计算定位然后使用CSS定位。

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

2 个答案: