我正在开发一款应用程序,到目前为止,这就是我所取得的成就。我的个人航班水平显示在列表中,我可以滚动浏览:
我想要的是,当我点击单个航班时,其详细信息将弹出/显示在屏幕上。所以我的下一步是弄清楚如何在这些飞行迭代中添加一个点击事件,以便调用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);
}
不知何故,我需要添加一个这样的点击事件:(点击)=&#34; selectFlight()on到每个li元素(每个单独的航班)..
有人可以帮我吗?我非常喜欢使用HTML&amp; amp; CSS。 提前谢谢。
编辑: 旧的flight-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><!– Select link –></th>
<th><!– Update link –></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>
我是否需要在我的flight-viewer.html中使用某些内容,例如onFlightSelected =&#34; flightSelected($ event)&#34;?
答案 0 :(得分:0)
飞行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(航班)中传递该航班参数,该函数将接受此参数并返回该特定航班信息
一切顺利。 任何查询都写下你的评论