angular2-masonry 总是将项目添加到末尾而不是按照正确的顺序

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

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

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

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

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

...所以我发布这个答案是为了帮助其他有同样问题的人，但是了解这里实际发生的事情仍然很棒。