Почему я не могу прочитать свойство 'poPanel' из неопределенного

Question

HTML Я добавляю упорядоченный список, который перебирает массив объектов и добавляет их на основе нажатия кнопки (т.е. списка элементов)

Пример: 1. Элемент 1 2. Элемент 2 3. Пункт 3

Элементы добавляются в порядке. Здесь нет проблем, но ... Когда я добавляю "функцию удаления", которая удаляет каждый элемент, он работает и фактически удаляет их, но я получаю следующую ошибку в консоли.

Невозможно прочитать свойство 'poPanel 'из неопределенного

<ol class="panelNumbers">
    <li *ngFor="let POpanel of POpanelList">
      <button class="removePObtn" (click)="removePO(poPanel)"><span class="k-icon k-i-close-circle k-i-x-circle" *ngIf="showClose"></span></button>
      <app-po-panels></app-po-panels>
    </li>
  </ol>

.TS

Здесь я установил пустой массив для POpanelList, и каждый элемент помещается в массив, но когда я пытаюсь удалить панель, я получаю неопределенное значение на poPanel в функции removePO

 async ngOnInit() {
        await this.getText();
        this.POpanelList = [];
    }

    /*Adding and Removing PO and SO Panels*/
    addPO() {
        this.POpanelList.push(
            { poPanel: this.newPoPanel }
        );
        this.showClose = true;
    }

    removePO(poPanel) {
        for (let i = 0; i < this.POpanelList.length; i--) {
            if (this.POpanelList[i]['poPanel'] === poPanel) {
                this.POpanelList.splice(i, 1);
            }
        }

        this.showClose = false;
    }

Answer 1

Когда вы выполните removePO, для l oop начнется с i=0 и последующим уменьшением i--, в результате чего i будет равно -1. Поскольку отрицательный индекс массива не может существовать, this.POpanelList[-1] вернет undefined, а this.POpanelList[-1]['poPanel'] приведет к вашей ошибке:

Cannot read property 'poPanel' of undefined

Я считаю, что исправление должно измениться i-- i++ в вашем l oop

    removePO(poPanel) {
        for (let i = 0; i < this.POpanelList.length; i++) {
            if (this.POpanelList[i]['poPanel'] === poPanel) {
                this.POpanelList.splice(i, 1);
            }
        }
        this.showClose = false;
    }