Angular 4中Get by Id失效及组件路由导航问题咨询

我来帮你一步步解决这个问题，用Angular推荐的响应式表单来实现数据填充会更灵活可靠，步骤如下：

1. 先确保你的模块导入了响应式表单模块：

// 在EditTruckComponent所属的模块文件中
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已导入的模块
    ReactiveFormsModule
  ]
})
export class YourFeatureModule { }

2. 在EditTruckComponent中初始化表单、获取路由参数并填充数据：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { TruckService } from '../services/truck.service';

@Component({
  selector: 'app-edit-truck',
  templateUrl: './edit-truck.component.html'
})
export class EditTruckComponent implements OnInit {
  truckForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute, // 用于获取路由中的ID参数
    private truckService: TruckService
  ) {
    // 提前创建表单结构，对应你的Truck模型字段
    this.truckForm = this.fb.group({
      truckCode: [''],
      purchasedDate: [''],
      descriptions: ['']
      // 其他需要编辑的字段可以继续添加
    });
  }

  ngOnInit(): void {
    // 从路由参数中提取truckId，注意转成数字类型
    const truckId = +this.route.snapshot.paramMap.get('id');
    
    // 调用服务获取单条卡车数据，订阅后填充表单
    this.truckService.getTruckById(truckId).subscribe(truck => {
      // 使用patchValue填充表单，无需传递所有字段，灵活性更高
      this.truckForm.patchValue({
        truckCode: truck.truckCode,
        purchasedDate: truck.purchasedDate,
        descriptions: truck.descriptions
      });
    });
  }
}

3. 模板中的表单绑定：

<form [formGroup]="truckForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label>卡车编号</label>
    <input type="text" formControlName="truckCode" class="form-control">
  </div>
  <div class="form-group">
    <label>购买日期</label>
    <input type="date" formControlName="purchasedDate" class="form-control">
  </div>
  <div class="form-group">
    <label>描述信息</label>
    <textarea formControlName="descriptions" class="form-control"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">保存修改</button>
</form>

如果你更习惯用模板驱动表单，可以替换成[(ngModel)]绑定：

• 模块导入FormsModule
• 组件内定义truck: Truck;
• 获取数据后赋值this.truck = truck;
• 模板中用<input type="text" [(ngModel)]="truck.truckCode" name="truckCode">

首先得确保路由配置里已经添加了编辑页面的路由规则，比如在app-routing.module.ts中：

import { Routes, RouterModule } from '@angular/router';
import { TruckComponent } from './truck/truck.component';
import { EditTruckComponent } from './edit-truck/edit-truck.component';

const routes: Routes = [
  { path: 'trucks', component: TruckComponent },
  { path: 'trucks/edit/:id', component: EditTruckComponent } // 带ID参数的编辑路由
];

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

然后在TruckComponent的模板中，给编辑按钮正确设置routerLink：

<tr *ngFor="let truck of trucks | async">
  <td>{{truck.truckId}}</td>
  <td>{{truck.truckCode}}</td>
  <td>{{truck.purchasedDate | date: 'yyyy-MM-dd'}}</td>
  <td>{{truck.descriptions}}</td>
  <td class="text-right">
    <a 
      class="btn-sm btn-outline-secondary" 
      ngbTooltip="编辑卡车信息"
      [routerLink]="['/trucks/edit', truck.truckId]" <!-- 数组形式传递路由路径和参数 -->
    >
      编辑
    </a>
  </td>
</tr>

几个注意点：

• routerLink用数组写法，第一个元素是路由路径，第二个是要传递的truckId参数
• 如果TruckComponent本身就在/trucks路径下，也可以用相对路径：[routerLink]="['edit', truck.truckId]"，适配性更强
• 确保truck.truckId是有效数值，避免路由参数异常

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