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

Question

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

代码如下：

<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 使用带有空白 href(href="") 的 a（锚点），当您从 header 部分单击 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>

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

Angular2-how to remove item in ng-template by ngFor

angular

ngfor

ng-template