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

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.com组件.ts

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

parent.com.ponent.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 */
}

---

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

parent.com组件.ts

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

parent.com.ponent.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;

工作起来很有魅力！