Angular 2 编写结构指令，如 ngFor、iterableDiffer 可能会导致错误

Posted 2023-02-22

【中文标题】Angular 2 编写结构指令，如 ngFor、iterableDiffer 可能会导致错误

【英文标题】：Angular 2 writing structural directive like ngFor, iterableDiffer may be causing errors

【发布时间】：2017-11-18 18:57:51

【问题描述】：

您好，我是 Angular 2 的新手，想写一个 ngFor 的实现来练习。我找到了这个教程： https://teropa.info/blog/2016/03/06/writing-an-angular-2-template-directive.html

我有它的工作，但最近我不断收到此错误。 “错误类型错误：this._trackByFn 不是函数”。

我希望可以对此进行更多调试，但文档很少，而且我并不完全理解 IterableDiffer(s)。所有人都看到它在第 41 行之后死了。我一直试图弄清楚我现在改变了几个小时。

let changes = this.differ.diff(this.collection);

这里是笨蛋：http://plnkr.co/edit/aM8Wdz72gu7BVNAN9Ulv?p=preview

感谢您提供的任何帮助。

更新：

我发现如果我在 Angular 2 中运行我的指令，我可以让它工作，并去掉不同的类型，像这样：private differ:IterableDiffer(now)private differ:IterableDiffer<any>(before )

仍然不是解决方案，因为我想弄清楚如何在 Angular 4 中完成这项工作。

【参考方案1】：

我怀疑问题出在您对集合进行比较的点的上游。 Angular 4 删除了 IterableDifferFactory 的 ChangeDetectorRef 参数。我建议回到您的 Angular 4 版本并更改与您不同的代码行：

this.differ = this.differs.find(coll).create(this.changeDetector);

类似于：

this.differ = this.differs.find(coll).create((value) => value);

我对自定义版本的 ngFor 进行了更改，使其能够在 Angular 4 中工作。