Angular2-как удалить элемент в ng-шаблоне с помощью ngFor

Я просто хочу удалить элемент в 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
person Gracian    schedule 07.03.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Accordion использует a(якорь) с пустым 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>
person Pankaj Parkar    schedule 07.03.2018
comment
Спасибо за ваш ответ, но он не работает. Все еще перенаправление на страницу индекса и перезагрузка. Я думаю, что есть проблема с ‹ng-template›, потому что, если я использую ‹div› вместо ‹accordion› и ‹ng-template >,это работает хорошо. - person Gracian; 07.03.2018
comment
@Gracian, я не понимаю - person Pankaj Parkar; 07.03.2018
comment
Согласно вашему ответу, я добавляю $event.preventDefault(); и это работает. - person Gracian; 07.03.2018