Javascript 无法按id从JSON获取数据
我正试着做一个有角度的应用。但我面临一个特殊的问题,每当我在flights.component.html中单击按钮时,与特定id相关的特定数据都不会显示在checkin.component.html中。相反,它是从本地JSON文件呈现整个数据 我的密码 app-routing.modules.tsJavascript 无法按id从JSON获取数据,javascript,html,angular,typescript,Javascript,Html,Angular,Typescript,我正试着做一个有角度的应用。但我面临一个特殊的问题,每当我在flights.component.html中单击按钮时,与特定id相关的特定数据都不会显示在checkin.component.html中。相反,它是从本地JSON文件呈现整个数据 我的密码 app-routing.modules.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; im
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 {}
flights.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>
<div *ngFor="let item of flightListData; let i = index">
<p [id]="i">{{ item.flightName }}</p>
</div>
checkin.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>
<div *ngFor="let item of flightListData; let i = index">
<p [id]="i">{{ item.flightName }}</p>
</div>
您不过滤从JSON文件接收的数据。当然,它应该显示所有数据。您应该根据路由中的id调用id。这是一些代码,请让我知道这是否有效。多谢各位 checkin.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
});
}
}
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 {}
}
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];
});
checkin.html
<div *ngFor="let item of data;">
<p>{{ item.flightName }}</p>
</div>
{{item.flightName}
在签入组件中,您需要再次从activatedRoute获取id。我将如何获取该id。你能举个例子吗