Angular2-如何通过 ngFor 删除 ng-template 中的项目

【问题标题】：Angular2-how to remove item in ng-template by ngForAngular2-如何通过 ngFor 删除 ng-template 中的项目
【发布时间】：2018-03-07 03:16:26
【问题描述】：

我只是想删除ngFor中的项目，但是当我点击删除按钮时，它总是会重新加载页面。我知道ng-template有问题。有什么建议吗？非常感谢！

代码如下：

<ngb-accordion [closeOthers]="true" #acc="ngbAccordion" class="ngb-accordion" activeIds="ngb0">
     <ngb-panel *ngFor="let stock of StockInvestForecast;let i = index" id="ngb{{i}}">
        <ng-template ngbPanelTitle>
           <span>
              <h4 class="text-purple">{{stock.StockName}}</h4>
              <button type="button" (click)="StockInvestForecast.splice(i,1)" class="btn icon-close-btn">
                <i class="fa fa-close"></i>
              </button>
          </span>
      </ng-template>
</ngb-accordion>

【问题讨论】：

标签： angular ngfor ng-template

【解决方案1】：

Accordion 使用a(anchor) 和空白href(href="")，当您从标题部分单击button 时，它会弹出该事件并触发href。这往往会将URL 更改为""（空白），但是你有默认重定向，它重定向到公共页面。您必须在手风琴标题上使用.preventDefault() 来防止事件被传播。

 <button type="button" class="btn icon-close-btn"
     (click)="$event.preventDefault();StockInvestForecast.splice(i,1)">
    <i class="fa fa-close"></i>
 </button>

【讨论】：

感谢您的回答，但它不起作用。仍然重定向到索引页面并重新加载。我认为有问题，因为如果我使用
而不是和，效果很好。
@Gracian 我不明白
根据您的回答，我添加“$event.preventDefault();”它有效。