JQuery при нажатии скрипта запускает обнаружение изменений - Angular 6

Question

У меня на сайте есть кнопка, которая добавляет элемент в массив, а затем пытается назначить нажатие с помощью jQuery для новой кнопки, выполнив следующие действия после добавления элемента в массив.

$(function()
{
  $(document).on('click', '.btn-add', function(e)
  {
    e.preventDefault();
    //do something like change the color of an element
  });
});

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

Что я здесь не так делаю?

Я новичок в угловой разработке и веб-разработке в целом, поэтому, пожалуйста, ребята, не обращайте на меня особого внимания;)

Answer 1

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

<input #hello type="text"/> <!-- I'm guessing the values being added to the array are coming from an input but they could come from anywhere -->
<button (click)="addNewButton(hello.value)">

код контроллера:

this.values = []

addNewButton(value) {
  this.values = this.values.push(value)
  // this.values = [...this.values, value] // same thing without mutating the array
}

Для новых кнопок:

<ng-container *ngFor="let value of values; index as i">
  <button (click)="newButtonClicked(value, i)">{{ value }}</button>
</ng-container>

И код контроллера для новых кнопок:

newButtonClicked(value, i) {
  console.log(value, i)
}

Answer 2

Вы должны использовать собственную парадигму привязки событий Angular для такого рода вещей.

<div *ngFor="let person of roster" (click)="showPopup(person, $event)">
    <p>{{person.name}}</p>
    <button (click)="findOutMore(person)">Find out more</button>
<div>

public function showPopup(person: Person, event: any){
    console.log(event.currentTarget);
}

public findOutMore(person: Person){
    console.log("User wants to find out more about",person);
}

Единственный раз, когда я лично запрашивал JQuery в приложении Angular, это когда сторонняя библиотека, которую яхочу использовать, использует его.

Вы получаете множество замечательных встроенных функций из коробки.