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

Question

Я использую угловой 4 +

Вот мой массив

я использовал ngfor для заполнения данных с помощью dragggable div

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

что я хочу всякий раз, когда я перетаскиваю / меняю один из элементов div, тогда новый массив становится чем-то вроде

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

Не могу найти никакого решения для этого

мой вантуз

https://plnkr.co/edit/oy2QWJ?p=preview

Answer 1

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

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

JS

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

• Обновление drag функции (set 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.log(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>
  

Пожалуйста, найдите рабочую версию, Плункер