Question

我通过*ngFor指令创建子元素列表（不是使用ComponentFactory）像这样：

 <ul class="nav navbar-nav">
   <top-menu #topmenu *ngFor="let menu of menus" (onDeleteMe)="handleDeleteMenu($event)">
  </top-menu>
</ul>

现在我希望handleDeleteMenu从DOM中删除组件。这有可能吗？或者我应该更改模板以使用组件工厂创建组件吗？

Answer 1

您可以将ngFor迭代的索引传递给onDeleteMe方法

<top-menu #topmenu *ngFor="let menu of menus; let i = index" (onDeleteMe)="handleDeleteMenu($event, i)">

然后在你的方法中拼出迭代

handleDeleteMenu(event, index){
    this.menus.splice(index, 1);
}

这将从您的数组中删除该特定迭代并重新呈现ngFor。这是一个演示plunkr https://plnkr.co/edit/qphEdumLB7Eenb3FPtL5?p=preview

Answer 2

您需要在ngFor中添加额外的div，索引，并在内部元素中添加ngIf：

<ul class="nav navbar-nav">
   <ng-container *ngFor="let menu of menus; let i = index;">
     <top-menu
       #topmenu
       (onDeleteMe)="handleDeleteMenu($event);showMenu[i]=false;" 
       *ngIf="showMenu[i]">
     </top-menu>
  </ng-container>
</ul>

在你的组件打字稿中，在onInit中添加一个show index：

showMenu = []
ngOnInit() {
  for( let i = 0; i < this.menus; i++ ) {
    this.showMenu.push(true);
  }
}

您也可以向this.menus添加新对象，而不是创建showMenu。

Answer 3

是的，这是可能的。但首先你不应该像this.menus那样给出。它应该是*ngFor="let menu of menus"。在handleDeleteMenu()函数中弹出menus数组中的元素。 ngFor指令将自动使用新的元素数组重新呈现。

Answer 4

* ngIf从dom树中删除dom元素，但不能在同一标记中使用* ngFor和* ngIf。您可以创建另一个标记并将* ngIf放在您的内部

 <ul class="nav navbar-nav">
   <div *ngIf="menus && menu.length > 0">
    <top-menu #topmenu *ngFor="let menu of menus" (onDeleteMe)="handleDeleteMenu($event)">
    </top-menu>
  </div>
</ul>

同样在你的代码中，this.menus将只是菜单，因为它在视图中不在组件类

中

如何在引发事件时从DOM中删除（不隐藏）Angular子元素？

4 个答案: