Javascript 在ngfor中交换数据后获取的新阵列

我用的是角度4+

这是我的数组

我使用ngfor用draggablediv填充数据

['MODEL', 'PART', 'CUSTOMER'];

每当我拖动/交换一个div时，我想要的是新数组

['PART', 'MODEL', 'CUSTOMER'];

我找不到任何解决办法

我的笨蛋

---

当您在

angular

的

范围之外更新
html
时，您需要付出额外的努力来确保
模板/组件的状态同步。您应该直接更新
模型
，因为它是双向绑定，
html
将根据该模型自动呈现

您需要进行以下更新

JS


添加私有变量
dragIndex
更新
drag
函数（设置dragIndex-被拖动元素的索引）


更新
drop
函数（在拖放索引处交换数组中的值）



HTML


未定义传入函数的
i
。在
ngFor
中将
i
定义为
索引
，并在
拖动
和
拖放
功能中传递它

<div *ngFor="let tiles of homePageSearchTiles; let i = index; (drop)="drop($event, i)" (dragover)="allowDrop($event)">
     <div class="tiles ui-g-12 ui-lg-5 card box-id" id="div{{tiles.id}}" draggable="true" (dragstart)="drag(i)">
         {{tiles}}
     </div>
</div>

这个解决方案真是太棒了。event.dataTransfer.setData（“src”，event.target.id）；//您故意删除了这一导致索引问题的内容。不知道setData的内部行为，但您的解决方案可以像charm@mave-很高兴帮助您：）我已删除该行，因为它不是必需的。
public drop (ev, index: number) {
   ev.preventDefault();
   let temp = this.homePageSearchTiles[this.dragIndex];
   this.homePageSearchTiles[this.dragIndex] = this.homePageSearchTiles[index];
   this.homePageSearchTiles[index] = temp;
   console.log(this.homePageSearchTiles);
} 

<div *ngFor="let tiles of homePageSearchTiles; let i = index; (drop)="drop($event, i)" (dragover)="allowDrop($event)">
     <div class="tiles ui-g-12 ui-lg-5 card box-id" id="div{{tiles.id}}" draggable="true" (dragstart)="drag(i)">
         {{tiles}}
     </div>
</div>