如何在 angular 中的 *ngFor 列表的每个项目中切换特定元素的 class？

Question

我有一个父组件，它有一个 *ngFor 来呈现存储在数据库中的子组件项的所有实例。默认情况下它们都是折叠的。 &可以通过调用一个toggle函数来展开，该函数传入子组件实例的点击事件

我想在父组件中添加一个按钮，用于切换父组件呈现的所有子组件实例。

父组件

<a class="btn btn-primary" (click)="ToggleAllVersions()">Expand All</a>
<version *ngFor="let version of versionService.versions | async" [version]="version"></version>

.

@Component({ selector: 'parent', templateUrl: './parent.component.html',})

ToggleAllVersions(){
    //add class to specific element in each version of versionService.versions
}

子组件

<div class="first-element">
     <div class="//toggle class here by calling ToggleAllVersions() in parent componant."></div>
</div>

Answer 1

如果您想在单击按钮时切换所有子组件，您可以使用一个标志来表示所有项目的当前状态。

parent.component.ts

@Component({ /* ... */ })
export class ParentComp {
 areItemsCollapsed = true;

 ToggleAllVersions(){
  this.areItemsCollapsed = !this.areItemsCollapsed;
 }

}

parent.component.html

<a class="btn btn-primary" (click)="ToggleAllVersions()">Expand All</a>
<version 
 *ngFor="let version of versionService.versions | async"
 [ngClass]="{ 'is-collapsed': areItemsCollapsed }"
 [version]="version"
></version>

child.component.css

:host.is-collapsed {
 /* ... Styles applied when the item is collapsed */
}

如果要切换 class 以获取 特定元素 ，则必须更改父组件中的一些内容。您可以使用一个映射对象，其中每个键是子组件的 id，值是 boolean，指示子组件是否应该折叠。

parent.component.ts

@Component({ /* ... */ })
export class ParentComp {
 collapsedItemsMap: { [k: string]: boolean | undefined } = {};

 toggleChildVersion (childItem){
  this.collapsedItemsMap[childItem.id] = !this.collapsedItemsMap[childItem.id]
 }
}

parent.component.html

<version 
 *ngFor="let version of versionService.versions | async"
 (click)="toggleChildVersion(version)"
 [ngClass]="{ 'is-collapsed': collapsedItemsMap[version.id }"
 [version]="version"
></version>

Answer 2

我最终做的是使用 @ViewChildren 如下

父组件

@ViewChildren(VersionComponent) private allVersions!: QueryList<VersionComponent>;
isAllExpanded = false;

  expandAndCollapse(){
    this.isAllExpanded = !this.isAllExpanded;
    this.allVersions.forEach(v=>v.isExpanded = this.isAllExpanded);
  }

子（版本）组件

 isExpanded = false;

很有魅力！

如何在 angular 中的 *ngFor 列表的每个项目中切换特定元素的 class？

How can I toggle a class of a specific element in each item of an *ngFor list in angular?

angular

ngfor

angular-components

parent.component.ts

parent.component.html

child.component.css

parent.component.ts

parent.component.html