Angular 切换 boolean 变量来自位于 ngFor 内的同级组件

Question

案例如下，一个ngFor渲染一个组件集合（app-item）。 每个组件都有一个名为“open”的 boolean 变量和一个名为“toggle”的 function，用于切换（真或假）变量。

如何单击组件（应用程序项）的按钮并更改剩余迭代同级项的 state？

app-page.component.html

<div *ngFor="let item of items">
  <app-item [data]="item"></app-item>
</div>

应用-item.component.html

<button (click)="toggle($event)">Toggle "open" variable.</button>
<div *ngIf="open">Content is now visible</div>

应用程序项.component.ts

export class ItemComponent {    
  open: boolean = false;

  toggle(event: any) {
     this.open = !this.open;
  }
}

Answer 1

我认为您有 3 个选项 1- 在 app-item-component 中使用 @output() 并向父组件发出事件，然后通过 @Input() 设置更改所有组件 state 2- 使用服务并在其中创建主题并订阅在子组件中 3- 将属性字段添加到您的项目 model 为 boolean 并在子组件或父组件中通过引用更改它