アンギュラ - のみ選択された要素トグル

Question

マイアプリの構造は以下の通りです：の各要素についてそこで、基本的

親ビュー

<ng-template ngFor let-r [ngForOf]="richieste"> 
<button type="button" (click)="toggleValutazioni(r)">Toggle</button> 
</ng-template> 
<div *ngIf="isToggledValutazioni(r)"> 
<app-valutazione-row [idRichiesta]="r.id"></app-valutazione-row> 
</div> 

子typescriptです

export class ValutazioneRowComponent implements OnInit { 
    @Input() idRichiesta: number; 
    ngOnInit() { 
    hereIsWhereIgetMyData(idRichiesta); 
    } 
} 

を私richiesteオブジェクト私はToggleボタンを表示し、それをトグルすると私は子コンポーネントを表示します。問題は、すべての子コンポーネントのボタンをトグルすると、最後の子コンポーネントのデータが切り替えられたことが示されるということです。それは、すべての子どもが最後に生まれた子どもに代わるようなものです。すべての子供が自分の情報を見せ続けるようにする方法はありますか？
ありがとうございます。

編集 以下は、私のトグル機能のコードです。

toggledValutazioni: Richiesta[] = []; 

toggleValutazioni(r: Richiesta): void { 
    const idx = this.toggledValutazioni.indexOf(r); 
    if (idx > -1){ 
     this.toggledValutazioni.splice(idx, 1); 
    } 
    else { 
     this.toggledValutazioni.push(r); 
    } 
    } 

    isToggledValutazioni(r: Richiesta): boolean { 
    return this.toggledValutazioni.indexOf(r) > -1; 
    } 

私は既に要素インデックスを考慮しています。問題は、1つの要素を切り替えると、トグルされた要素の下に詳細の行がビューに追加されるということです。別の要素を切り替えると、関連する行の詳細が追加されますが、前の行の行が最後に追加された行に変更されます。

Answer 1

基本的に、ボタンクリックハンドラロジックで表示される要素のIDを格納し、子/詳細コンポーネントにそれぞれの数値（または使用可能な場合は要素全体）を渡す必要があります。

@Component({ 
    selector: 'my-app', 
    template: ` 
     <button 
      *ngFor="let p of data" 
      (click)="toggleDetails(p.ProductID)">Product {{p.ProductID}}</button> 
     <div *ngIf="detailsForIndex !== undefined"> 
      <product-details [product]="detailsForIndex !== undefined ? data[detailsForIndex - 1] : undefined"></product-details> 
     </div> 
    ` 
}) 
export class AppComponent { 
    public data: any[] = products.slice(0, 10); 

    public detailsForIndex; 

    public toggleDetails(idx: number) { 
     this.detailsForIndex = this.detailsForIndex === idx ? undefined : idx; 
    } 
} 

@Component({ 
    selector: 'product-details', 
    template: ` 
     {{product | json}} 
    ` 
}) 
export class DetailsComponent { 
    @Input('product') product; 
} 

PLUNKER