각도 - 오직 선택된 요소 토글

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> 

자식 타이프 라이터

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; 
    } 

그래서 이미 요소 인덱스를 고려했습니다. 문제는 하나의 요소를 토글 할 때 토글 된 요소 아래에 내 뷰에 일련의 세부 정보를 추가한다는 것입니다. 다른 요소를 토글 할 때 관련된 세부 행을 추가하지만 이전 행의 세부 정보를 내가 추가 한 마지막 행으로 변경합니다.

Answer 1

기본적으로 버튼 클릭 처리기 로직에서 표시되어야하는 요소 세부 정보를 저장하고 해당 번호 (또는 사용 가능한 경우 전체 요소)를 하위/세부 구성 요소에 전달해야합니다 (예 :

@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