无法根据 id 从 JSON 中获取数据

Question

我正在尝试制作角度应用程序。但是我遇到了一个特殊的问题，每当我单击flights.component.html 中的按钮时，与特定id 相关的特定数据都不会显示在checkin.component.html 中。相反，它从本地 JSON 文件呈现整个数据。

我的代码。

app-routing.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 {}

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>

flights.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>

checkin.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 {}
}

Answer 1

你应该根据路由中的id调用id。这是一些代码，请让我知道这是否有效。谢谢。

checkin.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];
  });

checkin.html

<div *ngFor="let item of data;">
  <p>{{ item.flightName }}</p>
</div>

Answer 2

flightListData: {
    id: number;
    flightName: string;
    source: string;
    destination: string;
    duration: string;
    stop: string;
    departure: string;
    arrival: string;
  }[] = data;

您不过滤从 JSON 文件接收到的数据。绝对应该显示所有数据。