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 並在子組件或父組件中通過引用更改它