自定义元素上的角度非常怪异的错误

Question

我做了一个自定义的select元素，并且发生了一个奇怪的错误。

在这里，我重现了该错误：https://stackblitz.com/edit/angular-ff7i5j

新地址组件是产生此错误的组件。我只能从选择组件中选择一个项目，此后似乎不再调用 <div class="input" > <input #box pattern="[A-Za-z]{3}"> <ion-button type="submit" (click)="saveWeight(box.value); clicked=true;" [disabled]="clicked">Submit</ion-button> </div> 中的函数OptionSelectedEvent。

我真的不知道为什么第一个示例效果很好，而在new-address组件中却不起作用。

我希望有人可以帮助我解决这个奇怪的问题。

Answer 1

这里发生的是，在Angular模板中使用吸气剂会导致很多我们没有想到的问题。

我在您的代码中谈论这些吸气剂：

public get Judete(): any[] {
  return [{auto: "AB", nume: "Alba"}, {auto: "AR", nume: "Arad"}...];
}

Angular检查模板绑定，并在每个更改检测周期执行所有getter。该模板会获得Judete数组的新实例，并且每张支票上每个项目的新实例。

现在让我们看看在哪里使用该数组。

*ngFor="let item of Judete"

内置的角度ngForOf指令使用特殊算法在IterableDiffers的帮助下查找数组中的更改。这种差异会发现，在每个更改检测周期中，您的阵列都是全新的阵列，这会导致项目重新提交。这意味着在每次更改检测运行中都会创建新的SelectOptionComponent项目，并且您将失去对ContentChildren的订阅

因此解决方案应该很简单：只需定义一次数组，而不使用getter：

Judete =  [{auto: "AB", nume: "Alba"}, {auto: "AR", nume: "Arad"}, ...];

Forked Stackblitz