完成* ngFor后调用函数

3 回答

• 1

  有关我设法提出的解决方案，请参阅this Plunker .

  它可能不是很优雅，但它（大部分）都有效！

  基本上， *ngFor 有助于提供handful of values，如索引，偶数，奇数，幸运的是，第一个和最后一个布尔值，对于相应的迭代求值为true . 首先，您必须将值公开为 *ngFor 中的局部变量，就像索引一样 . 然后，您必须让Angular从模板调用该函数，您可以这样做，就像您将值绑定到模板但使用三级条件（对于错误的计算返回null） .

  <div *ngFor="let i of stuff; let l = last ">
    {{ i }} {{ l === true ? callOnLastIteration() : null}}
  </div>
  

  我说"(mostly) works"因为看起来如果你试图绑定到 *ngFor -ed元素中的一个属性，除了你正在迭代的属性，然后在最后一次迭代中调用的函数内部更改所述属性的值，你'll get undesired behavior and errors from Angular'改变传播系统 . 有关详细信息，请参阅Plunker .

  回复于 2024-05-03T03:08:46+08:00
• 2

  如果你能创建一个会做同样的指令会更好 . 您只需要将 last 标志传递给指令，它将在最后一个元素被渲染时调用所需的函数 .

  View

  <p class="my-element" 
    *ngFor="let i of stuff; let l = last" 
    [lastElement]="l" (lastFunc)="test()">
      {{i}}
  </p>
  

  Directive

  import { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';
  
  @Directive({
    selector: '[lastElement]'
  })
  export class LastElementDirective {
    @Input() lastElement : any;
    @Output() lastFunc = new EventEmitter();
    constructor(private el: ElementRef) { 
      this.setTimer(); //somehow lastElem value is available on next tick
    }
    setTimer(){
      setTimeout(() => {
        if(this.lastElem) this.lastFunc.emit();
      }, 0);    
    }
  }
  

  Plunkr in action

  回复于 2024-05-03T03:08:46+08:00
• 0

  Pankay Parkar答案有效，但你需要在setTimeout函数中更改 lastElement 的写入（现在是 lastElem ，所以plunker无法检查是否是* ngFor的最后一个元素）

  回复于 2024-05-03T03:08:46+08:00