Question

使用angular2-masonry，它将以正确的初始顺序绘制砖块（即它们出现在ngFor数组中的顺序），但是当从订阅中获取新数组时有一个新项目（甚至只是一个更改的项目），新的/更改的项目始终附加到末尾，而不是放在正确的位置（它在数组中的位置）。

数组是通过以下订阅获得的：

    this.thingService.getThings().takeUntil(this.unsubscribe)
        .subscribe( (things:IThing[]) => {
            this.things = things;
            /*This should reload and resort the things, but it doesn't.*/
            if (this.masonry){
                this.debug("yes this is being called");
                this.masonry._msnry.reloadItems();
                this.masonry.layout();
            }
        });

这个订阅可以正常工作，如果我输出things，它们就像预期的那样，并且顺序正确。出于绝望，我在砌筑上调用reloadItems和layout（从@ViewChild(AngularMasonry) private masonry: AngularMasonry;获得）。调用成功没有错误，但项目仍未按照它们在数组中出现的顺序绘制。

这是我的模板HTML：

    <masonry *ngIf="things && things.length"  [options]="{ }">
        <masonry-brick *ngFor="let thing of things" >
            Hi, my name is {{thing.name}}
        </masonry-brick>
    </masonry>

同样，要明确 - 在初始加载时（由同一订阅驱动），项目的顺序正确。

另外一个注意事项 - 如果我更改（或添加）另一个项目，那么现在错误地附加到末尾的上一个项目已正确排序在正确的位置，并且新项目在最后（无论是否为应该是不是）。因此，任何时候，只有一个项目不合适。

Answer 1

我发现我可以通过对砌体调用进行此更改来解决此问题（特别是将它们放入setTimeout调用中）：

setTimeout( () => {
    if (this.masonry){
        this.masonry._msnry.reloadItems();
        this.masonry.layout();
    }
});

请注意，这两个调用都是必需的。 layout本身并没有改变任何内容，reloadItems最终会导致它被正确排序，但某些事件必须首先触发layout。

我仍然有兴趣了解原因。当我调用reloadItems和layout时，即使没有setTimeout，数组也已更新，新内容应立即可用于重新加载。

...所以我发布这个答案来帮助其他人解决同样的问题，但是理解这里发生的事情仍然会很棒。

angular2-masonry总是将项目添加到最终而不是正确的顺序

1 个答案: