我有一个有角度的应用,我有一个问题 . 我有一个(父)组件,它有一个项目数组,每个项目都有一个子(子)组件 . 子组件每个都有一个按钮(和函数)来自行删除,但父组件没有被通知发生此事件 .
我不确定删除子组件的正确方法是什么,父组件将其从视图中删除 . 我目前只是调用 delete this.product (产品是父数组中的项目之一)确实将其从父数组中删除,但父数组不更新 .
delete this.product
您可以在子组件中以这种方式实现:
@Component({ selector: 'child', template: ` <div> {{element.name}} <span (click)="deleteElement()">Delete</span> </div> ` }) export class ChildComponent { @Input() element: any; @Output() elementDeleted: EventEmitter<any> = new EventEmitter(); deleteElement() { this.elementDeleted.emit(); } }
并在父级中利用此事件:
@Component({ selector: 'child', template: ` <div> <child *ngFor="#element of elements" [element]="element" (elementDeleted)="onElementDeleted(element)"> </child> </div> ` }) export class ParentComponent { constructor() { this.elements = [ { name: 'element1' }, { name: 'element2' }, (...) ]; } onElementDeleted(element) { var index = this.elements.findIndex((elt) => (elt===element)); if (index != -1) { this.elements.splice(index, 1); } }
1 回答
您可以在子组件中以这种方式实现:
并在父级中利用此事件: