将 ngFor 索引作为函数的参数发送

Question

我需要将 *ngFor 的索引作为函数参数的一部分发送：

<div *ngFor="let group of deviceGroups.groups | orderBy: 'description'; let i = index">
  <li class="group-item"><mat-checkbox>{{ group.name }} </mat-checkbox>
    <mat-icon (click)="collapseGroup('g{{ i }}')">keyboard_arrow_down</mat-icon>
  </li>
  <div id="g{{ i }}">
    Some content here that I want to hide when I click in the Mat-icon
  </div>
</div>

如果你注意到了，我要隐藏的内容是id="g{{ i }}"。它确实有效，但是当我想做同样的事情但作为函数 collapseGroup 的参数时会出现问题。当我写 (click)="collapseGroup('g{{ i }}')" returns 时出错。

另外，如何设置component.ts中的display='none'？我的意思是 JavaScript:

funtion collapseGroup(gid)
{
  document.getElementById(gid).style.display = 'none';
}

但在我的组件中？

Answer 1

您不能在传递函数参数时使用注解，您可以在函数内部使用注解

 <mat-icon (click)="collapseGroup(i)">keyboard_arrow_down</mat-icon>

有点像，

collapseGroup(gid)
{
  document.getElementById('g'+gid).style.display = 'none';
}

将 ngFor 索引作为函数的参数发送

Send ngFor index as a parameter of a function

components

typescript

ngfor

angular