Angular2+ 如何从 QueryList<> 获取正确的元素顺序答案

【问题标题】：Angular2+ how to get proper element order from QueryList<>Angular2+ 如何从 QueryList<> 获取正确的元素顺序
【发布时间】：2017-02-26 17:10:17
【问题描述】：

所以我有一个可排序的列表，其中包含*ngFor 中的几个元素，我将其拖放。在下降时，我想获得物品的新订单。所以我添加了一个事件，但 QueryList 的顺序保持不变。

这是我尝试过的一些事情，但没有运气

public getOrder() {

        var records: QueryList<SimpleGridRecord> = this.simpleGridRecords.length > 0 || this.simpleGridDraggable.simpleGridRecords;
        records.notifyOnChanges()
        // this.cd.detectChanges();
        records.forEach((s:SimpleGridRecord) => {
            console.log(s.index);
            console.log(s.item.getKey('id'));
        });

    }

是否有办法获取更新后的元素顺序列表？

我在循环的对象中保留索引和 ID

问候

肖恩

【问题讨论】：

你能创建一个 plunker 吗？

标签： angular

【解决方案1】：

您可以使用@ContentChildren() 或@ViewChildren() 并订阅更改：

@ViewChildren(SimpleGridRecord) records: QueryList<SimpleGridRecord>;

ngAfterViewInit() {
  this.records.changessubscribe(val => console.log(this.records.toArray()));
}

【讨论】：

tx 的答案，这正是我所做的，但项目的顺序与 HTML 中的顺序不同

我添加了一张图片，如您所见，在放置后，X 在查询中排在第一位，但 Y 在 UI 中排在第一位:(

您是通过直接 DOM 操作来更新顺序，还是通过更改您在 *ngFor 中使用的数组的顺序来更新顺序？

是的，我通过直接 DOM 操作来更新顺序，因为我通过拖放来更改项目的顺序，我必须触摸 DOM

我认为你应该在之后更改数组中的顺序，让*ngFor 以新顺序重新绘制，它们也将匹配查询。