我如何在 NgFor 循环之后调用函数答案

【问题标题】：how I can call a function after NgFor loop我如何在 NgFor 循环之后调用函数
【发布时间】：2020-11-25 18:42:25
【问题描述】：

我在 html 中有下一段代码：

<div *ngFor="let obj of objts; let i = index" class="col-md-3">
   {{obj.name}}
</div>

在我的组件中，我有下一个：

catchName( petition ) {
    console.log( petition );
}

我已经尝试了下一件事：

<div *ngFor="let obj of objts; let i = index" class="col-md-3">
   {{obj.name}}
   <div (click)="catchName(obj.name)"></div>
</div>

但不起作用

如何在 NgFor 的每个循环中捕获名称/变量的函数中的值？

非常感谢

【问题讨论】：

目前catchName 登录了什么？在这种情况下，您可以使用@Input 轻松地将每个“子”移动到新组件。然后您可以轻松访问 obj 及其子属性。
对不起...我想在 ngFor 在每个循环中执行循环时调用函数 catchName 我想澄清一下，对错误感到抱歉

标签： angular angular8 angular9

【解决方案1】：

基于这个solution，你正在寻找的是创建一个这样的指令：

@Directive({ selector: '[invoke]'})
class InvokeDirective {
  @Output() invoke:EventEmitter = new EventEmitter();
  ngAfterContentInit() {
    this.invoke.emit(null);
  }
}

然后像这样在你的ngFor 中调用它：

<div *ngFor="let obj of objts; let i = index" class="col-md-3" (invoke)="catchName(obj.name)">
   {{obj.name}}
</div>

【讨论】：

该解决方案我认为它适用于 AngularJS 或 Angular 2 而不是 Angular 8-9
它适用于 Angular 2+，这里没有任何东西不适用于 Angular 8 或 9。你可以肯定地使用它。

【解决方案2】：

你可以把{{ obj.name }}放在<div (click)="catchName(obj.name)"></div>里面，所以当你点击元素的名字时，你也点击了div。

<div *ngFor="let obj of objts; let i = index" class="col-md-3">
   <div (click)="catchName(obj.name)">
     {{obj.name}}
   </div>
</div>

【讨论】：

如果我不想点击捕捉函数中的变量。我想要的是当 ngFor 循环调用函数时。
最好的方法是在 .ts 组件上使用 for 循环。但是，如果您真的需要在 html 上执行此操作，您可以直接调用 {{ catchName(obj.name) }} 而无需将其放入任何标记中。例如：
{{obj.name}} {{ catchName(obj.name) }}
您在那里打印的内容非常完美，但我有一个问题......函数无限循环......我无法阻止它......
每次在页面中执行操作时都会触发该函数，您真的需要从html中调用该方法吗？也许生命周期钩子之一，例如 ngOnInit 可以帮助您更好地做到这一点

【解决方案3】：

如果您在单击文本时尝试调用该函数，它将不起作用，因为您在文本旁边创建了一个新的空 div，由于它是空的，因此很难单击。试试这个：

<div *ngFor="let obj of objts; let i = index" class="col-md-3" (click)="catchName(obj.name)">
   {{obj.name}}
</div>

【讨论】：

幕后发生的事情是 angular 为循环创建了一个新组件并用它包装了 div 的其余部分，因此在 click 中调用 obj 是安全的，尽管它与其声明在同一行.
如果我不想点击捕捉函数中的变量。我想要的是当 ngFor 循环调用函数时。

【解决方案4】：

现在我更好地理解了您的请求，我认为正确执行此操作的最有效方法是为内部元素创建一个新组件，将对象传递给它，然后使用 ngOnInit 调用函数

编辑

例子：

在您的工作区中运行它（您可以将内部组件更改为您喜欢的任何内容）

ng g c 内部组件
打开文件 src/app/inner-component/inner-component.ts，然后对您的组件类进行以下编辑：

添加一个新的类属性如下（就在类标题下方）：@Input('obj') obj;。不要忘记从 '@angular/core' 导入 { Input } 装饰器
将 catchName 作为类方法添加到类中的任意位置
在现有的ngOnInit方法中，调用catchName(this.obj.name)

把它放在文件 src/app/inner-component/inner-component.html {{obj.name}}
把它放在主组件中： <div *ngFor="let obj of objts; let i = index" class="col-md-3"> <app-inner-component [obj]="obj"></app-inner-component> </div>

【讨论】：

你有这方面的例子吗？我什么都找不到