Question

我的html中有这一行。

<ng-template ngFor let-i="index" let-c="count" let-contact [ngForOf]="contacts">

当我不期望它时，ngFor似乎正在执行。我想“设置一个断点”，看看它是否真的在重新创建元素。

我想到的是做这样的事情：

<ng-template ngFor let-i="index" let-c="count" let-contact let-dummy="functionCalledOnEachIteration" [ngForOf]="contacts">

然后在functionCalledOnEachIteration中设置断点。但是不接受该语法。

有没有办法做我的想法？

Answer 1

ngFor

是的，有这样的语法：

<ng-template
    ngFor let-contact [ngForOf]="contacts"
    let-i="index" let-c="count" [ngForTrackBy]="functionCalledOnEachIteration"

>

组件中的

：

public functionCalledOnEachIteration(index, item) {
  debugger;
  console.log('trackByFn', index, item);
  return item;
}

trackBy通常用于循环优化（参见：https://angular.io/api/common/NgForOf）

ng-template debugging

对于ng-template调试，我通常也使用这个技巧：

想象一下你不知道哪个让-x ='???'对模板有效。你可以尝试：

<ng-template let-context="valueOf()">{{log(context)}}</ng-template>

和

public log(x) { console.log('template log:', x); }

valueOf是object.prototype的一部分，如果没有重写，则返回自身。拥有模板上下文对象实例时，可以看到其所有属性。这些是你可以通过let-x ='???'访问的那些语法。