Угловой 2 щелчка стрелка несколько раз внутри ngFor

У меня очень странная проблема (никогда не видел раньше) с моим компонентом. Я пытаюсь удалить строку, нажав на кнопку внутри списка ngFor. Когда у меня есть только одна линия работает, но когда это больше, чем одна строка событие вызывается дважды, один раз для хорошей линии и один раз для первой строки (после того, как удаляется другая линия):Угловой 2 щелчка стрелка несколько раз внутри ngFor

<label> 
    <div class="tag" *ngFor="let o of selectedOptions;"> 
     <span class="tag-text">{{ o.textContent }}</span> 
     <button (click)="removeTag(o)" type="button" class="fa fa-times"></button> 
    </div> 
</label>

И вот мой метод ведьмой вызывается дважды (только если есть более, что один «вариант»):

public removeTag (option: NxtSelectOptionComponent) { 
    this.selectedOptions = [ 
     ...this.selectedOptions.filter(o => o !== option), 
    ] 
}

Я пытался использовать сращивание, я пытался добавить stopPropagation ... Я не понимаю, я «Я сделал это много времени, и это первый раз, когда я это вижу.

EDIT: метод removeTag вызывается, когда я нажимаю на элемент .tag, поэтому, когда я нажимаю кнопку, он вызывается дважды, но я не могу понять, почему ... атрибут (click) находится только на button

Устранена проблема: я нашел проблему ... Ярлык ярлыка FYI нажимает на кнопку, поэтому, если у вас есть какой-либо (щелчок) атрибут, он будет срабатывать дважды.

источник

2016-11-29 Nicolas Garin

Вы проверили функцию фильтра? это не проблема? Пробовал ли вы использовать 'console.log()' внутри функции removeTag(), чтобы узнать, вызвана ли она дважды? Возможно, вам нужно попробовать 'console.log (this.selectedOptions)' в конце функции removeTag, чтобы увидеть, что было изменено. Сообщите нам, если есть что-то новое, потому что пока это странно. Ваш код хорош, поэтому ... –

Спасибо У меня нет функции фильтра. RemoveTag вызывается дважды. Я обнаружил, что он вызывается, даже если я нажимаю на элемент .tag (ведь почему removeTag вызывается дважды) Я не знаю, почему, и если я нажму на элемент .tag, цель (внутри объекта события) это первая кнопка списка o_O! –

Можете ли вы воспроизвести в Plunker? –

Попробуйте

<div *ngFor="let user of users; let i=index" > 
    {{user.name}} 
    <div> 
     <a class="btn btn-danger" (click)="removeUser(i)">-</a> 
    </div> 
</div> 

removeUser(i): void { 
    this.users.splice(i, 1); 
}

источник

2016-11-29 15:01:39

Спасибо за ваш ответ, я уже пытался удалить по индексу с помощью сращивания, но у меня такая же проблема ... :( –

в этом случае что-то еще проблема, это работает для меня –

На самом деле второй щелчок будет называться родительским элементом. Поведение браузеров по умолчанию - вызвать щелчок на входе, как только родитель получил щелчок.

Использование

event.preventDefault();

остановить второй курок.

источник

2017-09-27 10:40:10

Угловой 2 щелчка стрелка несколько раз внутри ngFor

ответ

Смежные вопросы