Angular中*ngFor索引传函数参数及组件内设置display样式问题

嘿，我来帮你搞定这两个Angular的问题！

一、正确传递*ngFor索引给collapseGroup函数 #

你之前写的(click)="collapseGroup('g{{ i }}')"会报错，是因为Angular模板的事件绑定表达式里，不能用{{}}插值语法来拼接字符串。直接在表达式里用变量i和字符串拼接就可以了：

<!-- 正确写法 -->
<div *ngFor="let item of items; let i = index">
  <button (click)="collapseGroup('g' + i)">折叠</button>
  <div id="g{{ i }}">需要隐藏的内容</div>
</div>

这样点击按钮时，传给collapseGroup的参数就是'g0'、'g1'这类正确的ID了。

二、在Component.ts中设置元素display='none' #

Angular里有几种方式实现类似原生JS的DOM样式操作，推荐优先用Angular原生的方法，避免直接操作document：

方法1：使用Renderer2（推荐，兼容多平台） #

Renderer2是Angular提供的安全DOM操作工具，先在组件中注入它，然后结合元素ID获取元素并设置样式：

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  constructor(private renderer: Renderer2) {}

  collapseGroup(elementId: string) {
    const element = document.getElementById(elementId);
    if (element) {
      this.renderer.setStyle(element, 'display', 'none');
    }
  }
}

方法2：使用ElementRef结合ViewChildren（针对*ngFor生成的元素） #

如果是要操作*ngFor循环出来的多个元素，可以给元素加模板引用变量，再用ViewChildren获取所有元素：

模板部分：

<div *ngFor="let item of items; let i = index">
  <button (click)="collapseGroup(i)">折叠</button>
  <div #groupItem id="g{{ i }}">需要隐藏的内容</div>
</div>

组件TS部分：

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  @ViewChildren('groupItem') groupItems!: QueryList<ElementRef>;

  collapseGroup(index: number) {
    const element = this.groupItems.toArray()[index].nativeElement;
    element.style.display = 'none';
  }
}

额外推荐：Angular式的显示隐藏（无需直接操作DOM） #

其实Angular更推荐通过组件状态来控制元素显示，这种方式更符合Angular的数据流理念，也更易维护：

组件TS部分：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  // 维护一个数组，记录每个组的隐藏状态，初始都显示
  isGroupHidden: boolean[] = [];
  // 假设你有一个items数组用于循环
  items = [/* 你的数据 */];

  // 初始化时根据items长度设置状态
  ngOnInit() {
    this.isGroupHidden = Array(this.items.length).fill(false);
  }

  collapseGroup(index: number) {
    this.isGroupHidden[index] = true;
  }
}

模板部分：

<div *ngFor="let item of items; let i = index">
  <button (click)="collapseGroup(i)">折叠</button>
  <!-- 使用[hidden]控制显示，或者用*ngIf直接移除元素 -->
  <div [hidden]="isGroupHidden[i]" id="g{{ i }}">需要隐藏的内容</div>
</div>

内容的提问来源于stack exchange，提问作者Sergio Mendez