javascript - 当 *ngFor 在 Angular 2 中完成时执行一个函数

Question

我试图创建一个 Angular 为 2 的应用程序，我希望当最后一个元素在 *ngFor 中呈现时，执行一个函数，像这样:

<ul>
  <li *ngFor="#i of items">{{i.text}}</li> <==== i want when this completed, execute a functuon in my class
</ul>

谢谢。

Answer 1

更新

您可以为此目的使用@ViewChildren

三种情况

1. 在初始化时 ngFor 元素由于其上的 ngIf 或其父元素而未被渲染

• 在这种情况下，每当 ngIf 变为 truthy 时，您都会收到 ViewChildren 订阅的通知

2. 在初始化时 ngFor 元素被渲染，不管 ngIf 在它上面还是它的父元素

• 在这种情况下，ViewChildren 订阅不会在第一次通知您，但您可以确定它已在 ngAfterViewInit Hook 中呈现

3. 项目被添加到/从 ngFor 数组中删除

• 在这种情况下，ViewChildren 订阅也会通知您

[Plunker Demo] (查看那里的控制台日志)

@Component({
  selector: 'my-app',
  template: `
        <ul *ngIf="!isHidden">
          <li #allTheseThings *ngFor="let i of items; let last = last">{{i}}</li>
        </ul>
        
        <br>
        
        <button (click)="items.push('another')">Add Another</button>
        
        <button (click)="isHidden = !isHidden">{{isHidden ? 'Show' :  'Hide'}}</button>
      `,
})
export class App {
  items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

  @ViewChildren('allTheseThings') things: QueryList < any > ;

  ngAfterViewInit() {
    this.things.changes.subscribe(t => {
      this.ngForRendered();
    })
  }

  ngForRendered() {
    console.log('NgFor is Rendered');
  }
}

---

原创

你可以这样做(但请参阅 the side Effects for yourself)

<ul>
  <li *ngFor="let i of items; let last = last">{{i}} {{last ? callFunction(i) : ''}}</li>
</ul>

---

这是无用的，除非与changeDetectionStrategy.OnPush一起使用

然后您可以控制发生变化检测的次数，从而控制您的函数被调用的次数。

即:当items的数据发生变化时，你可以触发下一个changeDetection，你的函数会给出正确指示 ngFor 是为真正的变化 呈现的。