Обновить сортировку при добавлении нового элемента в массив

Question

Сортируемый компонент показывает только начальные элементы массива. Когда новое значение помещается в массив, сортируемый объект не отображает его.

Компонент: импортировать { Component } из '@angular/core';

@Component({
  selector: 'custom-item-template-demo',
  templateUrl: './custom-item-template.html'
})
export class CustomItemTemplateDemoComponent {
  public itemStringsLeft: any[] = [
    'Windstorm',
    'Bombasto',
    'Magneta',
    'Tornado'
  ];

  public addItem() {
    this.itemStringsLeft.push("new item");
  }
}

Шаблон:

<button type="button" (click)="addItem()">Add</button> 
<template #itemTemplate let-item="item" let-index="index"><span>{{index}}: {{item.value}}</span></template>
  {{itemStringsLeft.length}}
  <pre>{{ itemStringsLeft | json }}</pre>
  <bs-sortable
    [(ngModel)]="itemStringsLeft"
    [itemTemplate]="itemTemplate"
    itemClass="sortable-item"
    itemActiveClass="sortable-item-active"
    placeholderItem="Drag here"
    placeholderClass="placeholderStyle"
    wrapperClass="sortable-wrapper"
  ></bs-sortable>

Answer 1

Обходной путь: вызов вручную для записи значения SortableComponent

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'custom-item-template-demo',
  templateUrl: './custom-item-template.html'
})
export class CustomItemTemplateDemoComponent {
  public itemStringsLeft: any[] = [
    'Windstorm',
    'Bombasto',
    'Magneta',
    'Tornado'
  ];

  @ViewChild(SortableComponent) sortableComponent: SortableComponent;
  public addItem() {
    this.itemStringsLeft.push("new item");
    this.sortableComponent.writeValue(this.itemStringsLeft);
  }
}

Answer 2

Другой обходной путь с переназначением значений списка:

 public addItem() {
    this.itemStringsLeft.push("new item");
    this.itemStringsLeft = this.itemStringsLeft.slice();
  }

Answer 3

Следует добавить import { SortableComponent } from 'ngx-bootstrap';

Это будет работать.

Answer 4

Оператор спреда хорошо сработал для меня с этой проблемой:

addItem(){ this.itemStringsLeft = [...this.itemStringsLeft, {name: 'Windstorm', range: 5}]; }