EventEmitter 中的元素数量没有改变

Question

组件 Grid 如下所示：

export class GridComponent {
    @Output('modelChanged') modelChangedEmitter = new EventEmitter();

    private valueChanged(newValue: any, item: Object, prop: string) {
        item[prop] = newValue;
        this.emitChangedData();
    }

    private deleteItem() {
        this.data = this.data.filter(function (e) {
            return e !== this.toBeDeletedItem;
        });
        this.emitChangedData();
    }

     private emitChangedData() {
        this.modelChangedEmitter.emit({
            data: this.data
        });
     }

}

因此，当值被更改或删除时，EventEmitter 将数据的当前状态发送到容器组件。当一个值改变时，它被正确地发送到容器组件，所以它起作用了。但是，如果一个元素被过滤（并且在 Grid Component 中被有效过滤），发出的数据仍然有相同数量的项目。

这是容器组件初始化：

<grid [title]="'This is the grid title'" (modelChanged)="dataChanged(data)"></grid>

有什么问题吗？

Answer 1

使用() =>代替function ()

private deleteItem() {
    this.data = this.data.filter((e) => {
        return e !== this.toBeDeletedItem;
    });
    this.emitChangedData();
}

以确保 this. 始终指向当前 class。

根据评论更新

<grid (modelChanged)="dataChanged($event)"></grid>

而不是

<grid (modelChanged)="dataChanged(data)"></grid>

EventEmitter 中的元素数量没有改变

Number of elements is not changed in EventEmitter

angular

typescript

eventemitter