Как удалить элемент из списка (PrimeNg)

Question

У меня есть список, который я хочу использовать для добавления и удаления элементов.

Вот мой код:

 <p-listbox #myListbox
           [options]="myListboxValues"
           [(ngModel)]="selectedValue"
></p-listbox>

myListboxValues ​​относится к типу SelectItem []. Я получаю значения по умолчанию для списка в виде массива объектов. Я перебираю массив объектов и добавляю их в myListBoxValues.

public initListBox(objectArray:MyObject[]): void {
    this.myListboxValues = [];
    
    objectArray.forEach(currentObject =>{
      this.myListboxValues.push({label: currentObject.label, value: currentObject});
    });
}

Функция добавления:

public addToList(objectToAdd: MyObject): void{
  this.myListboxValues.push({label: objectToAdd.label, value: objectToAdd});
}

Функция удаления:

public remove(objectToRemove: MyObject): void{
    for (let _i = 0; _i < this.myListboxValues.length; _i++) {
       if(this.myListboxValues[_i].label === objectToRemove.label) {
          this.myListboxValues.splice(_i, 1);
       }              
    }
}

Моя проблема То есть, если я вызываю функцию удаления, список не обновляет sh. Я должен нажать на него, чтобы он обновил sh сам.

Изменить: у меня такая же проблема с функцией initListBox. Мне нужно щелкнуть по списку, чтобы увидеть элементы.

Answer 1

Я думаю, потому что Angular не видит, что myListboxValues был изменен. Может, стоит попробовать другой способ:

const myOtherListboxValues = this.myListboxValues;
for (let _i = 0; _i < myOtherListboxValues .length; _i++) {
   if(myOtherListboxValues [_i].label === objectToRemove.label) {
      myOtherListboxValues.splice(_i, 1);
   }              
}

this.myListboxValues = myOtherListboxValues;

Answer 2

Я бы посоветовал, чтобы любые изменения, которые вы вносите в данные ссылочного типа в вашем примере массива, всегда производили манипуляции с копией предыдущего значения и назначали новый объект этой переменной. что вы делаете в addToList, попробуйте что-нибудь подобное, а также для remove:

public addToList(objectToAdd: MyObject): void{
  const newValue = {...this.myListboxValues}
  newValue.push({label: objectToAdd.label, value: objectToAdd});
  this.myListboxValues = newValue;
}

Таким образом вы убедитесь, что повторная визуализация произойдет, если ссылка на объект изменится. Вы просто помогаете своей машине рендеринга с этим.

Делать это по-своему - само по себе неплохо, но изменение объекта всегда является проблемой для каждого фреймворка.