组件共享数据时,无法读取未定义的值？

Question

我无法使用从服务中调用getbyId()方法收到的数据填充表单,在我的控制台中我看到错误:无法读取未定义的truckId,我发现的每个解决方案都说我的表单已呈现比我想用getById()方法得到的对象更快,解决方案应该是*ngIf ="truck",它应该使表单等待,但它不解决它只是拒绝显示所有形式的表单.IN stackblitz https://stackblitz.com/edit/stackoverflow-49847806-kdjhdc?file=app%2Fservices%2Ftruck.service.ts

但在控制台中,我可以看到URL,当我打开它时,我发现它实际上从我的后端服务获得了详细信息

getTruckById(id: number): Observable<Truck> {
   const url = `${this.baseUrl}/${id}`;
    return this.http.get(url, {headers: this.headers})
      .pipe(map(this.extractData),
        tap(data => console.log(JSON.stringify(data))),
        catchError(this.handleError));
  } 

这完全是编辑组件

export class EditTruckComponent implements OnInit {
  five : number = 5;
  seven: number = 7;

 @Input() truck: Truck;

  truckIdTOUpdate: number;
  processValidation = false;
  dates: string;
  statusCode: number;
  requestProcessing = false;

   truckForm = new FormGroup({
    truckCode: new FormControl(Validators.maxLength(this.seven), Validators.minLength(this.five)),
    date: new FormControl('', Validators.required  ),
    descriptions: new FormControl(Validators.maxLength(this.seven), Validators.minLength(this.five))
  });


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

  ngOnInit() {
     this.getTruckDetail();
  }

  back() {
    this.router.navigate(['/trucks'])
  }

  getTruckDetail() {
    const truckId = +this.route.snapshot.paramMap.get('truckId');
   this.truckService.getTruckById(truckId)
      .subscribe((truck) => this.truck = truck)
      console.log("this is the truck" + this.truck);
  }

  processForm() {
    this.processValidation = true;
    if (this.truckForm.invalid) {
      return; //Validation failed, exit from method.
    }
    // if we are here then all good
    this.preProcessConfigurations()

    let truckCode = this.truckForm.get('truckCode').value.trim();
    let date = this.truckForm.get('date').value.trim();
    let description = this.truckForm.get('descriptions').value.trim();

    if (this.truck.truckId == undefined) {
      let truck = new Truck(null, truckCode,  date , description);

      this.truckService.createTruck(truck).subscribe((truck) => {
        console.log(truck)
        this.router.navigate(['/trucks']);
      }, errorCode => this.statusCode = errorCode);

    } else {
        this.truck = new Truck(this.truck.truckId, truckCode, date, description);
      this.truckService.updateTrucks(this.truck).subscribe((truck)=> {
        console.log(truck);
        this.router.navigate(['/trucks']);
      }, errorCode => this.statusCode = errorCode);
    }
  }

  //Perform preliminary processing configurations
  preProcessConfigurations() {
    this.statusCode = null;
    this.requestProcessing = true;
  }

}


   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 ==undefined">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"
                       for="truckCode"></label>
                <input formControlName="truckCode"
                       id="truckCode"
                       class="form-control"
                       type="text"

                       name="truckCode"
                       min="2018-04-11" required
                       [(ngModel)]="truck?.truckCode"/> Truck Code
                <div class="alert alert-danger" role="alert"  *ngIf="truckForm.get('truckCode').invalid && processValidation" required="required" [ngClass] ="'error'">
                  you must have a minimum of 5 chars and maximum of 7
                </div>
                <div *ngIf="statusCode === 409" [ngClass] = "'success'" class="alert alert-danger" role="alert">
                  Truck with such Code already exists try another TruckCode.
                </div>

              </div>

              <!--purchasedDate-->
              <div class="form-group" >
                <label class="form-control-label"  *ngIf="truckForm.get('date').invalid && processValidation"  [ngClass] ="'error'"
                       for="purchasedDate">date is required.</label>
                <input formControlName="date"
                       id="purchasedDate"
                       class="form-control"
                        type="date"
                        name="purchasedDate"
                       [(ngModel)]="truck?.purchasedDate "
                /> Purchased Date
              </div>

我已经发布了所有因为未定义的值从我的按钮的保存和更新开始,当我删除它时,它归结为truckCode未定义

为了更好地理解这是我的truckComponent导航到EditTruckComponent我的truckComponent显示卡车列表和编辑和删除功能现在我的编辑功能在HTML我有ai只有一个路由器链接

<tr *ngFor="let truck of trucks | async">
              <td>{{truck.truckId}}</td>
              <a routerLink="/truckProfile/">
              <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>

                 <span data-toggle="modal" data-target="#deleteDialog">
                                <a href="#" class="btn-sm btn-outline-secondary"
                                 ngbTooltip="delete truck"
                                 placement="top">
                                    <i class="fa fa-remove"></i>
                                <span class="d-none d-md-inline"  (click)="deleteTruck(truck)">Delete</span></a>
                </span>
              </td>

所以我只是使用路由器链接和我的editTruckCompnent导航我在init上执行getById

Answer 1

问题出在我的java控制器中

 @GetMapping(value = "/trucks/{truckId}")
    @ResponseStatus(HttpStatus.OK)
    public final TruckDto getTruckId(@PathVariable(value = "truckId")
                                         final Integer truckId) {

        LOGGER.debug("test: truckId({})", truckId);
        Truck truck = truckService.getTruckById(truckId);
        return mappingService.map(truck, TruckDto.class);
    }

当我添加这个注释它起作用@ResponseBody所以响应体告诉控制器返回的对象应该被序列化为JSON并传回HttpResponse对象.这就是我得到HttpResponse失败的原因