Valeurs de retour à partir de composants en boucle ngFor

Question

je le code HTML suivant dans mon principal composant:

<app-loc-list-item *ngFor="let loc of locs; let i = index" [loc]="loc" [i]="i"></app-loc-list-item> 

Le LocListItemComponent ressemble à ceci:

import { Component, OnInit, Input } from '@angular/core'; 

.... 

export class LocListItemComponent implements OnInit { 
    @Input() loc: Location; 
    @Input('i') index: number; 
    selected: boolean = false; 

    onLocationSelect() { 
    this.selected = !this.selected; 
    } 
} 

Maintenant, il peut y avoir un certain nombre de ces petits composants et entre 0 et n peuvent avoir la valeur selected = true. Je veux maintenant recevoir les valeurs index pour chacun de ces composants qui ont selected = true.

Comment puis-je accéder à ces valeurs d'index?

Answer 1

si vous voulez seulement interroger l' « app-loc-list-item » enfants du composant parent comprennent alors cette ligne de code dans le parent

@ViewChildren(LocListItem) listItems: QueryList<LocListItem> 

afin que vous puissiez itérer sur la propriété listItems dans votre parent et voir ceux qui ont été sélectionnés

Answer 2

Pour que vous pouvez utiliser

@Output: utilisé pour transmettre des données de composant enfant à composant parent

Parent Composant:

<app-loc-list-item *ngFor="let loc of locs; let i = index" [loc]="loc" [i]="i" (change)="selectChange($event)"></app-loc-list-item> 

selectChange(data) 
{ 
    console.log(data); 
} 

Composante enfants:

export class LocListItemComponent implements OnInit { 
    @Input() loc: Location; 
    @Input('i') index: number; 
    @Output()change: EventEmitter<any> = new EventEmitter<any>(); 
    selected: boolean = false; 

    onLocationSelect() { 
    this.selected = !this.selected; 
    let data = { 'index' : this.index , 'selected' : this.selected } 
    this.change.emit(data); 
    } 
} 

Answer 3

Il n'y a pas de double liaison de données entre les composants dans Angular (qui était dans AngularJs).

Il y a quelques façons pour votre problème, d'une façon est la suivante:

• à utiliser un service où vous définissez locs et dans votre composant enfant

vous:

this.yourServices.locs.splice(index, 1) 

Edit: Ce que j'ai dit n'est pas correct. Ce sera le cas entre le composant non corrélé.