[英]Not able to fetch data as per id from JSON
我正在尝试制作 angular 应用程序。 但是我面临一个特殊的问题,每当我单击flights.component.html 中的按钮时,与特定ID 相关的特定数据不会显示在checkin.component.html 中。 相反,它从本地 JSON 文件渲染整个数据。
我的代码。
应用程序路由.modules.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { FlightsComponent } from './flights/flights.component';
import { CheckinComponent } from './checkin/checkin.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'flights',
component: FlightsComponent,
children: [{ path: 'checkin/:id', component: CheckinComponent }]
},
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
航班.component.html
<mat-expansion-panel *ngFor="let item of flightListData">
<mat-expansion-panel-header>
<mat-panel-title>
{{ item.flightName }}
</mat-panel-title>
<mat-panel-description>
<span class="margin-right-20">{{ item.source }}</span>
<span class="margin-right-20">{{ item.stop }}</span>
<span>{{ item.destination }}</span>
</mat-panel-description>
</mat-expansion-panel-header>
<div>
<span>Departure: {{ item.departure }}</span>
<span>Arrival: {{ item.arrival }}</span>
</div>
<div>
<button
mat-raised-button
color="primary"
class="margin-right-20"
(click)="clickHandler(item.id)"
>
Check In
</button>
</div>
</mat-expansion-panel>
<router-outlet></router-outlet>
航班.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import data from '../../data/data.json';
@Component({
selector: 'app-flights',
templateUrl: './flights.component.html',
styleUrls: ['./flights.component.scss']
})
export class FlightsComponent implements OnInit {
constructor(private router: Router, private activatedRoute: ActivatedRoute) {}
flightListData: {
id: number;
flightName: string;
source: string;
destination: string;
duration: string;
stop: string;
departure: string;
arrival: string;
}[] = data;
ngOnInit(): void {}
clickHandler(id: number): void {
this.router.navigate(['checkin', id], {
relativeTo: this.activatedRoute
});
}
}
checkin.component.html
<div *ngFor="let item of flightListData; let i = index">
<p [id]="i">{{ item.flightName }}</p>
</div>
签入.component.ts
import { Component, OnInit } from '@angular/core';
import data from '../../data/data.json';
@Component({
selector: 'app-checkin',
templateUrl: './checkin.component.html',
styleUrls: ['./checkin.component.scss']
})
export class CheckinComponent implements OnInit {
constructor() {}
flightListData: {
id: number;
flightName: string;
source: string;
destination: string;
duration: string;
stop: string;
departure: string;
arrival: string;
}[] = data;
ngOnInit(): void {}
}
你应该根据路由中的id调用id。 这是一些代码,请让我知道这是否有效。 谢谢你。
签入.component.ts
ngOnInit() {
this.route.params.subscribe(params => {
this.id =+ params['id'];
this.flightListData.filter( item => item.id === this.id);
this.data = this.flightListData[this.id-1];
});
签到.html
<div *ngFor="let item of data;">
<p>{{ item.flightName }}</p>
</div>
flightListData: {
id: number;
flightName: string;
source: string;
destination: string;
duration: string;
stop: string;
departure: string;
arrival: string;
}[] = data;
您不过滤从 JSON 文件接收的数据。 绝对应该显示所有数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.