Javascript Get by Id在angular 4中不起作用如何将数据获取到表单中

我想从另一个组件TruckComponent导航到我的编辑页面-EditTruckComponent，因此我在TruckComponent中使用路由器链接，如下所示

  <tr *ngFor="let truck of trucks | async">
              <td>{{truck.truckId}}</td> 
              <td>{{truck.truckCode}}</td>
              </a>
              <td>{{truck.purchasedDate | date: 'yyyy-MM-dd'}}</td>
              <td>{{truck.descriptions}}</td>
              <td class="text-right">
                <a class="btn-sm btn-outline-secondary"
                   ngbTooltip="Edit Truck"
                   placement="top">
                  <i class="fa fa-bus"></i> <span
                  class="d-none d-md-inline" [routerLink]="['/editsTrucks', truck.truckId]">Edit</span></a>

这里我使用@Input tp表示id的接收实体和路由器参数

但我无法用数据填充我的editTruck html，它说truck id未定义，所以我尝试使用truck？truckId。truckId然后拒绝完全显示下面的表单是我的html和控制台输出

ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 18, nodeDef: {…}, elDef: {…}, elView: {…}}
View_EditTruckComponent_0 @ EditTruckComponent.html:15
proxyClass @ compiler.js:14653
DebugContext_.logError @ core.js:14996
ErrorHandler.handleError @ core.js 
ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
truck.service.ts:87 Http failure response for http://localhost:8088/trucks/2: 302 Found
TruckService.handleError @ truck.service.ts:87

和我的编辑卡车html

header>
  <nav id="main-header"
       class="py-1 mb-3 navbar navbar-expand-sm navbar-light bg-light text-dark">
    <span class="navbar-brand text-uppercase mr-auto">
      <a class="btn alert-secondary" (click)="back()" role="button">Back</a></span>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a type="submit" form="editFormTruck"
           (click)="processForm()"

           class="btn btn-light"
           title="Save Truck"
           data-toggle="tooltip"
           data-placement="bottom">
          <i class="fa fa-save"></i> <span class="d-none d-sm-inline"   *ngIf="truck.truckId === null">Save</span>
          <span class="d-none d-sm-inline" *ngIf="truck.truckId">Update</span>
        </a></li>
    </ul>
  </nav>
</header>

<section id="department">
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-body">
            <form [formGroup]="truckForm" (ngSubmit)="processForm()"   id="editFormTruck"  >

              <!--truck code-->
              <div class="form-group">
                <label class="form-control-label" *ngIf="truckForm.get('truckCode').invalid && processValidation"
                       required="required" [ngClass]="'error'"
                       for="truckCode">truck code is required.</label>
                <input formControlName="truckCode"
                       id="truckCode"
                       class="form-control"
                       type="text"
                       name="truckCode"
                       required
                       [(ngModel)]="truck.truckCode"/> Truck Code
                <div *ngIf="statusCode === 409" [ngClass]="'success'">
                  Truck with such Code already exists try another TruckCode.
                </div>
              </div>
            <div>

标题>
返回


拯救
更新


卡车代码是必需的。
卡车代码
具有此代码的卡车已存在，请尝试另一个TruckCode。

我也在我的卡车部件上试过

  @Input() truck: Truck;
  processValidation = false;
  statusCode: number;
  requestProcessing = false;

  truckForm = new FormGroup({
    truckCode: new FormControl('', Validators.required),
    date: new FormControl('', Validators.required),
    descriptions: new FormControl('', Validators.required)
  });

  constructor(private truckService: TruckService,
              private router: Router, private route: ActivatedRoute) {
  }

  ngOnInit(): void {
    this.route.params
      .switchMap((params: Params) => this.truckService.getTruckById(+params['truckId']))
      .subscribe(truck => this.truck = truck);
  }

    <app-edit-truck [truck]="truck$ | async"></app-edit-truck>

    export class EditTruckParentComponent {
        truck$: Observable < Truck > ;

        constructor(private truckService: TruckService) {
            this.truck$ = this.truckService.getTruckById(truckId);
        }
    }

but my app.component.html 
has this so could not add async to the page

 <app-navigation></app-navigation>
<router-outlet (activate)='onActivate($event)'
               (deactivate)='onDeactivate($event)'></router-outlet>

导出类EditTruckParentComponent{
卡车$：可观察<卡车>；
构造器（专用卡车服务：卡车服务）{
this.truck$=this.truckService.getTruckById（truckId）；
}
}
但是我的app.component.html
存在此问题，因此无法将异步添加到页面

我的服务就是这样的

  private baseUrl: string = 'http://localhost:8088/trucks';
  getTruckById(id: number): Observable<Truck> {
    return this.http.get(this.baseUrl + "/" + id)
      .pipe(map(this.extractData),
        catchError(this.handleError));
  }

private-baseUrl:string='1〕http://localhost:8088/trucks';
getTruckById（id:number）：可观察{
返回此.http.get（this.baseUrl+“/”+id）
.管道（地图（此数据），
catchError（this.handleError））；
}

看起来，您没有调用实际的端点。您的错误显示了的Http失败响应http://localhost:8088/trucks/2。我不明白这一点，看起来您正在使用前端应用程序本身的URL执行HTTP请求，或者使您的服务调用模拟数据、内存中的web api或实际的api

请在您的订阅服务中执行此操作方法：

subscribe({
    (truck) => {
        this.truck = truck;
        console.log(truck);  // please tell what does it print?
    }
})

当你试图得到这些参数时，你能做到吗？虽然我不确定

this.route.params.subscribe((params) => {
    this.truckService.getTruckById(+params['truckId'])
        .subscribe(
            (truck) => {
                this.truck = truck;
                console.log(truck);  // Subscribe to the service not the route.
            }
        )
})

---

我得到了这个，得到了什么？在订阅标题下，我发布了结果你的意思是，你在控制台上没有得到任何输出，只有错误？你能展示一下你的服务吗？另外，请检查更新的答案