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

Question

我只是想删除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>

Answer 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>