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

基本上你需要存储应该显示的元素详细信息的ID（在按钮单击处理程序逻辑中），然后将相应的数字（或整个元素，如果可用）传递给子/细节组件，例如：< / p>

@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

角度 - 仅切换选定的元素

1 个答案: