Получить новый массив после обмена данными в ngfor

Когда вы обновляете html вне scope из angular, вам нужно будет приложить дополнительные усилия, чтобы убедиться, что состояние template/component синхронизировано. Вы должны напрямую обновить model, и поскольку это двусторонняя привязка, html будет отображаться автоматически в соответствии с этим.

Вам необходимо сделать следующие обновления

JS

• Добавить приватную переменную dragIndex

• Обновить функцию drag (установить dragIndex - индекс перетаскиваемого элемента)

  public drag (index) {
     this.dragIndex = index;
  }
  

• Обновить функцию drop (поменять местами значения в массиве в индексах перетаскивания)

  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.info(this.homePageSearchTiles);
  } 
  

HTML

• Переданная функция i не определена. Определите i как index в ngFor и передайте его в функции drag и drop.

  <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>
  

Найдите рабочую версию, Plunker