Angular 5路由问题：访问model/1时显示全部数组对象而非对应ID数据

Hey there! Let's figure out why you're seeing all objects when visiting /model/1 instead of just the one with id=1. I'll walk you through the fix step by step—Angular 5's routing and data handling has a clear path here, so we'll cut through the conflicting info you found online.

First, make sure your routing module is set up to capture the dynamic id parameter correctly. In your app-routing.module.ts (or relevant routing file), your route should look like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ModelComponent } from './model/model.component'; // Replace with your component path

const routes: Routes = [
  // Other existing routes...
  { path: 'model/:id', component: ModelComponent } // The :id tells Angular to capture this as a parameter
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This ensures Angular knows to grab the value after /model/ and pass it to your component as the id parameter.

Next, in your ModelComponent, use ActivatedRoute to get the id from the URL, then filter your array to find the matching object. Here's a complete example:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-model',
  templateUrl: './model.component.html',
  styleUrls: ['./model.component.css']
})
export class ModelComponent implements OnInit {
  // Replace this with your actual array of objects
  allObjects = [
    { id: 1, name: 'Object 1', description: 'First item' },
    { id: 2, name: 'Object 2', description: 'Second item' },
    { id: 3, name: 'Object 3', description: 'Third item' }
  ];
  selectedObject: any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // Subscribe to route parameter changes (handles navigation between model/1, model/2, etc.)
    this.route.paramMap.subscribe(params => {
      // Convert the string parameter to a number (route params are always strings!)
      const targetId = +params.get('id');
      
      // Find the object with a matching id
      this.selectedObject = this.allObjects.find(obj => obj.id === targetId);
    });
  }
}

Key Notes: #

• The + before params.get('id') is critical: route parameters are strings, and if your id is a number, comparing 1 === "1" will fail. This converts the string to a number for a valid match.
• Using subscribe ensures the component updates if the user navigates to a different id without reloading the page.

Instead of looping through the entire array in your template, just display the selectedObject:

<div *ngIf="selectedObject">
  <h2>Object Details (ID: {{ selectedObject.id }})</h2>
  <p>Name: {{ selectedObject.name }}</p>
  <p>Description: {{ selectedObject.description }}</p>
  <!-- Add other properties from your object here -->
</div>

<div *ngIf="!selectedObject">
  <p>Object not found!</p>
</div>

The *ngIf checks prevent empty content or errors if no object matches the requested id.

If your array is loaded from a backend service (the more common real-world scenario), make sure you filter only after the data is loaded. Here's how to handle that cleanly:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { YourDataService } from '../your-data.service'; // Your service path
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-model',
  templateUrl: './model.component.html',
  styleUrls: ['./model.component.css']
})
export class ModelComponent implements OnInit {
  selectedObject: any;

  constructor(
    private route: ActivatedRoute,
    private dataService: YourDataService
  ) { }

  ngOnInit(): void {
    this.route.paramMap.pipe(
      switchMap(params => {
        const targetId = +params.get('id');
        // Fetch all data, then filter for the matching id
        return this.dataService.getAllObjects().pipe(
          map(objects => objects.find(obj => obj.id === targetId))
        );
      })
    ).subscribe(obj => {
      this.selectedObject = obj;
    });
  }
}

Even better: if your backend has an endpoint to fetch a single object by id (like /api/model/1), modify your service to call that directly instead of fetching all objects—this is more efficient for large datasets.

• String/Number Mismatch: Forgetting to convert the route parameter to a number is the #1 cause of failed matches.
• Not Subscribing: If you only grab the id once in ngOnInit without subscribing, the component won't update when navigating between different ids.
• Filtering Before Data Loads: If you filter before your service returns data, selectedObject will be undefined—always wait for the data to arrive first.

That should resolve your issue! Let me know if you hit any specific snags with your existing code.

内容的提问来源于stack exchange，提问作者RyanIndustries8