javascript - 单击脚本上的 JQuery 触发更改检测-Angular 6

Question

我的网站上有一个按钮，它向数组添加一个项目，然后在将项目添加到数组后，通过执行以下操作，尝试将使用 jQuery 的点击分配给新按钮。

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

我使用 ngFor 遍历这个数组并生成按钮。单击事件有效，但是，它会导致我每次单击某处时都会触发我的 Angular 变化检测，这会重新生成所有内容并丢弃脚本所做的更改。

我在这里做错了什么？

一般来说，我是 Angular 和 Web 开发的新手，所以请大家不要对我太苛刻 ;)

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)">

Controller 代码:

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>

以及新按钮的 Controller 代码:

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