使用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); 
    } 

不知怎的，我需要添加一个像这样的点击事件：（点击）=“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> 

我是否需要在我的飞行viewer.html一些诸如onFlightSelected =“flightSelected （$事件）“？

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（flight）中的航班参数和该功能将接受该参数并返回该航班的特定信息。

一切顺利。 对于任何查询请写评论