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设置了一个空数组，并将每个项目都推送到该数组上，但是当我尝试删除面板时，在removePa函数中的poPanel上得到了未定义的值

 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时，for循环将从i=0开始，然后递减i--，导致i等于-1。由于负数组索引不存在，this.POpanelList[-1]将返回undefined，而this.POpanelList[-1]['poPanel']将导致错误：

Cannot read property 'poPanel' of undefined

我相信解决方法是在循环中将i--更改为i++

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

为什么无法读取未定义的属性“ poPanel”

1 个答案: