从服务获取当前元素（周期挂钩问题）

Question

你好，我在角度循环钩上遇到了一些麻烦。

这是我测试中的Stackblitz：

https://stackblitz.com/edit/angular-vpoyqm

这是逻辑：

我有两个组成部分和一项用于存储数据的服务

1）billings.component

2）billing.component

在billings.component中，我有一种 setCurrentBilling 方法，用于将当前账单发送到服务并显示账单（ngIF）。

在billing.component中，我需要从服务中获取当前组件。如果我尝试在ngOnInit中进行控制台，则第一次未定义属性 current 。

请先点击以获取当前帐单的步骤是什么？

感谢您的宝贵帮助

Answer 1

您的模板：

<div *ngFor="let billingItem of billings" class="LG_invoice-item" #billing (click)="setCurrentBilling(billingItem)" >
  <div class="LG_form-title" (click)="billing.value = !billing.value">
    {{billingItem.month}} {{billingItem.years}}
  </div>
  <app-billing *ngIf="billing.value" ></app-billing>
</div>

因此，您有一个父div和一个嵌套的(click)="billing.value = !billing.value" ，两者都有一个点击侦听器。

第一个要执行的是内部的：

<app-billing *ngIf="billing.value" ></app-billing>

重新制作模板的模板，现在显示一个新元素：

ngOnInit() {
    this.billingsService.log(); 
    setTimeout(() => { 
      this.billingsService.log(); 
      }, 0);

    //console.log('currentelem: ', );
  }

因此将执行此元素的ngOnInit：

current

在这里您还没有设置(click)="setCurrentBilling(billingItem)" 。然后，在第一个周期完成后，另一个点击处理程序开始起作用：

setTimeout

然后，将解析第一个click中的<div *ngFor="let billingItem of billings" class="LG_invoice-item" #billing (click)="billing.value = !billing.value;setCurrentBilling(billingItem)" > <div class="LG_form-title"> {{billingItem.month}} {{billingItem.years}} </div> <app-billing *ngIf="billing.value" ></app-billing> </div> 。

解决方案：点击处理程序可以完成两项任务：

env