Javascript 当组件共享数据时，无法读取未定义的值？
我无法用从服务的getbyId（）方法接收到的数据填充我的表单，在我的控制台中，我看到错误：无法读取未定义的truckId，我找到的每个解决方案都说我的表单的渲染速度比我想用getbyId（）方法获得的对象快，并且解决方案应该是*ngIf=“truck”这应该让表单等待，但它不能解决问题，它只是拒绝显示表单而已。在下面的闪电战中 但在控制台中，我可以看到URL，当我打开它时，我看到它实际上从我的后端获得了详细信息 服务Javascript 当组件共享数据时，无法读取未定义的值？,javascript,angular,Javascript,Angular,我无法用从服务的getbyId（）方法接收到的数据填充我的表单，在我的控制台中，我看到错误：无法读取未定义的truckId，我找到的每个解决方案都说我的表单的渲染速度比我想用getbyId（）方法获得的对象快，并且解决方案应该是*ngIf=“truck”这应该让表单等待，但它不能解决问题，它只是拒绝显示表单而已。在下面的闪电战中 但在控制台中，我可以看到URL，当我打开它时，我看到它实际上从我的后端获得了详细信息 服务 getTruckById(id: number): Observable&
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));
}
getTruckById（id:number）：可观察{
常量url=`${this.baseUrl}/${id}`；
返回this.http.get（url，{headers:this.headers}）
.管道（地图（此数据），
点击（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>
导出类EditTruckComponent实现OnInit{
五：数字=5；
七：数字=7；
@输入（）卡车：卡车；
truckIdTOUpdate：编号；
processValidation=false；
日期：字符串；
状态码：编号；
requestProcessing=false；
truckForm=新的FormGroup({
truckCode:newformcontrol（Validators.maxLength（this.seven）、Validators.minLength（this.five）），
日期：新FormControl（“”，需要验证人），
描述：新的FormControl（Validators.maxLength（this.seven）、Validators.minLength（this.five））
});
构造函数（专用路由：ActivatedRoute，专用卡车服务：卡车服务，专用路由器：路由器）{
}
恩戈尼尼特（）{
this.getTruckDetail（）；
}
back（）{
this.router.navigate（['/trucks']）
}
getTruckDetail（）{
const truckId=+this.route.snapshot.paramMap.get（'truckId'）；
这个.truckService.getTruckById（truckId）
.订阅（（卡车）=>this.truck=truck）
console.log（“这是卡车”+这辆卡车）；
}
processForm（）{
this.processValidation=true；
如果（此.truckForm.invalid）{
return；//验证失败，退出方法。
}
//如果我们在这里，一切都好
这个.preProcessConfigurations（）
让truckCode=this.truckForm.get（'truckCode'）.value.trim（）；
让date=this.truckForm.get（'date'）.value.trim（）；
让description=this.truckForm.get（'descriptions'）.value.trim（）；
如果（this.truck.truckId==未定义）{
let truck=新卡车（空，卡车代码，日期，说明）；
this.truckService.createTruck（truck）.subscribe（（truck）=>{
控制台日志（卡车）
this.router.navigate（['/trucks']）；
}，errorCode=>this.statusCode=errorCode）；
}否则{
this.truck=新卡车（this.truck.truckId，truckCode，日期，描述）；
this.truckService.updateTrucks（this.truck）.subscribe（（truck）=>{
控制台。原木（卡车）；
this.router.navigate（['/trucks']）；
}，errorCode=>this.statusCode=errorCode）；
}
}
//执行初步处理配置
预处理配置（）{
this.statusCode=null；
this.requestProcessing=true；
}
}
class=“btn btn灯”
title=“保存卡车”
数据切换=“工具提示”
数据放置=“底部”>
拯救
更新
卡车代码
您必须拥有至少5个字符，最多7个字符
具有此代码的卡车已存在，请尝试另一个TruckCode。
日期是必需的。
购买日期
<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>
{{truck.truckId}}
因此，我只需使用路由器链接进行导航，在我的EditTruckComponent上，我在init上执行getById，这是一个设计问题。在我看来，正确的做法是：
EditTruckComponent父级应该是智能的，执行http调用并将卡车传递给EditTruckComponent
（您可以使用async，因此不必手动订阅和取消订阅）
下面是我如何想象父组件的线索：
<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);
}
}
问题出在我的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失败的原因评论不用于扩展讨论；这段对话已经结束。我已经发布了我的truckComponent的功能，以便您能够更好地解释我的错误，让我更好地理解并解决它，谢谢你我不知道你写的async应该放在哪里，因为我刚刚在我的卡车组件上做了一个routerLink导航我建议的解决方案有一个基本的stackblitz：如果你想更准确地回答你的问题，你可以分叉和编辑。就在那之前，我编辑了我的，让我告诉你我现在有什么，你可以告诉我有什么错，我希望能够单击edit并使用getById获取卡车进行编辑，现在我已经在truckComponent构造函数中完成了这项工作，正如您所说的，我看到了示例，但我不能将其放在我的parenet组件上，因为它有自己的函数和html，我的父组件显示卡车列表
@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);
}