クリックイベントをngforの反復リストに追加

Question

私はアプリを開発していますが、これまでのところ達成したことです。

私が欲しい私は、個々の飛行をクリックすると、その内容が画面に表示される/ポップアップ表示されますということです。私は、私はスクロールできるリストに水平に表示私の個々の便があります。だから私の次のステップは、selectFlightメソッドが呼び出されるように、これらのフライト反復にクリックイベントを追加する方法を考え出すことです。

マイコード： 飛行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); 
    } 

どういうわけか私はこのようなクリックイベントを追加する必要があります：（click）= "selectFlight（）on各li要素（それぞれの個別のフライト） ..

誰かがこれを手伝ってくれますか？私はHTMLで& CSSの角度で開発するのが初めてです。 ありがとうございます。

編集： 古い飛行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> 
--> 

飛行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> 

は、私は、このようなonFlightSelected = "flightSelectedとしての私の飛行viewer.htmlで何かが必要です（$イベント） "？

Answer 1

飛行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); 
} 

あなたが合格しなければなりませんselectFlight（飛行）の飛行パラメータとその関数はこのパラメータを受け入れ、その特定の飛行情報を返します

すべて最高です。 あなたのコメントをお書きください