Ajout d'un événement click à une liste d'itérations avec ngfor

Question

Je suis en train de développer une application et jusqu'à présent, c'est ce que j'ai réalisé. J'ai mes vols individuels afficher horizontalement dans une liste que je peux faire défiler:

Ce que je veux est que lorsque je clique sur un vol individuel, ses détails surgiront/afficher sur l'écran. Donc, ma prochaine étape consiste à déterminer comment ajouter un événement click à ces itérations de vol afin que la méthode selectFlight soit appelée.

Mon code: vol viewer.html:

<h3>Flights </h3> 
<div> 
    <ul class= "grid grid-pad"> 
     <a *ngFor="let flight of flights" class="col-1-4"> 
      <li class ="module flight"> 
       <h4>{{flight.number}}</h4> 
      </li> 
     </a> 
    </ul> 
</div> 

flight.viewer.component.ts:

@Component({ 
    selector: 'flight-viewer', 
    templateUrl: 'app/flight-viewer.html', 
    styleUrls: ['app/flight-viewer.css'] 
}) 
export class FlightViewerComponent { 
    name = 'FlightViewerComponent'; 
    errorMessage = ""; 
    stateValid = true; 
    flights: Flight[]; 
    selectedFlight: Flight; 
    flightToUpdate: Flight; 

    constructor(private service: FlightService) { 
     this.selectedFlight = null; 
     this.flightToUpdate = null; 
     this.fetchFlights(); 
    } 
    flightSelected(selected: Flight) { 
     console.log("Setting selected flight to: ", selected.number); 
     this.selectedFlight = selected; 
    } 

flight.row.component.ts:

@Component({ 
    selector: '[flight-row]', 
    templateUrl: 'app/flight-row.html', 
    styleUrls: ['app/flight-row.css'] 
}) 
export class FlightRowComponent { 
    @Input() 
    flight: Flight; 
    @Output() 
    onFlightSelected = new EventEmitter<Flight>(); 
    @Output() 
    onFlightUpdating = new EventEmitter<Flight>(); 
    name = 'FlightRowComponent'; 

    selectFlight() { 
     console.log("Just selected ", this.flight.number, " for display"); 
     this.onFlightSelected.emit(this.flight); 
    } 

D'une manière ou d'une autre, j'ai besoin d'ajouter un événement click comme ceci: (click) = "selectFlight() sur chacun des éléments li (chaque vol individuel) ..

Quelqu'un peut-il m'aider? Je suis nouveau à développer en angulaire avec HTML & CSS. Merci d'avance.

Edit: vieux vol viewer.html

<!-- 
<h3>{{errorMessage}}</h3> 
<flight-selected [flight]="selectedFlight"></flight-selected> 
<table *ngIf="stateValid"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>Origin</th> 
      <th>Departure Time</th> 
      <th>Destination</th> 
      <th>Arrival Time</th> 
      <th>&lt;!&ndash; Select link &ndash;&gt;</th> 
      <th>&lt;!&ndash; Update link &ndash;&gt;</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr flight-row 
      [flight]="current" 
      (onFlightSelected)="flightSelected($event)" 
      (onFlightUpdating)="flightUpdating($event)" 
      *ngFor="let current of flights"></tr> 
    </tbody> 
</table> 
<div *ngIf="flightToUpdate"> 
    <flight-update [flight]="flightToUpdate" 
        (onFlightUpdated)="updateFlight($event)"></flight-update> 
</div> 
--> 

vol row.html:

<td>{{flight.number}}</td> 
<td>{{flight.origin}}</td> 
<td>{{flight.departure | date}}</td> 
<td>{{flight.destination}}</td> 
<td>{{flight.arrival | date}}</td> 
<td><span (click)="selectFlight()">Select</span></td> 
<td><span (click)="updateFlight()">Update</span></td> 

Ai-je besoin quelque chose dans mon vol viewer.html tels que onFlightSelected = "flightSelected ($ event) "?

Answer 1

vol viewer.html:

<div> 
<ul class= "grid grid-pad"> 
    <a *ngFor="let flight of flights" class="col-1-4"> 
     <li class ="module flight" (click)="selectFlight(flight)"> 
      <h4>{{flight.number}}</h4> 
     </li> 
    </a> 
</ul> 

flight.row.component.ts:

@Component({ 
selector: '[flight-row]', 
templateUrl: 'app/flight-row.html', 
    styleUrls: ['app/flight-row.css'] 
}) 

export class FlightRowComponent { 
    @Input() 
    flight: Flight; 
    @Output() 
    onFlightSelected = new EventEmitter<Flight>(); 
    @Output() 
    onFlightUpdating = new EventEmitter<Flight>(); 
    name = 'FlightRowComponent'; 

selectFlight(flight) { 
    console.log("Just selected ", this.flight.number, " for display"); 
    this.onFlightSelected.emit(this.flight); 
} 

vous devez passer ce paramètre de vol dans selectFlight (vol) et la fonction acceptera ce paramètre et retourner cette information particulière de vol

Tout le meilleur. pour toute requête écrire votre commentaire