У меня есть сервис в angular, я использую httpClient, и у меня есть два компонента, грузовики и edit-truck, edit-truck - это то место, где я должен выполнять операции сохранения или обновления, но теперь, когда я нажимаю кнопку редактирования из html грузовиков в компоненте грузовика Я не получаю никакого ответа, я использую формы для проверки, как я могу вызвать форму в компоненте формы редактирования из компонента грузовика, чтобы я мог заполнить форму сущностью
service
getTruckById(truckId: string): Observable<Truck> {
let cpParams = new URLSearchParams();
cpParams.set('id', truckId);
return this.http.get(this.baseUrl + "/" + cpParams)
.pipe(map(this.extractData),
catchError(this.handleError));
}
компонент моего грузовика
export class TrucksComponent implements OnInit {
statusCode: number;
trucks: Observable<Array<Truck>>;
constructor(private truckService: TruckService, private router: Router) { }
ngOnInit() {
this.trucks = this.getTrucksDtos();
}
getTrucksDtos() {
return this.truckService.getTrucks();
}
deleteTruck(truck) {
this.truckService.deleteTruckById(truck.truckId)
.subscribe(successCode => {
this.statusCode = successCode;
// this.getTrucksDtos();
},
errorCode => this.statusCode = errorCode);
}
// i should get the truck from the service getbyid here then transfer to edits form
updateTruck(truckId: string) {
here i should do getby id
this.truckService.getTruckById(truckId)
this.router.navigate(['/edits'])
}
эта операция должна заполнить форму в другом компоненте ниже, это компонент и формы, я новичок в angular, поэтому у меня может быть несколько ошибок, любые предложения, пожалуйста
export class EditTruckComponent implements OnInit {
private truck: Truck;
public truckForm: FormGroup;
constructor(private truckService: TruckService, formBuilder: FormBuilder,
private router: Router) {
this.truckForm = formBuilder.group({
truckCode: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(30)]],
purchasedDate: ['', [Validators.required]],
descriptions : ['', [Validators.required]]
});
}
// private readonly toastCtrl: ToastController
ngOnInit() {
this.truck = this.truckService.getter();
}
processForm() {
if (this.truck == undefined) {
this.truckService.createTruck(this.truck)
.subscribe((truck) => {
console.info(truck)
this.router.navigate([''])
},(error) => {
console.info(error);
});
} else {
this.truckService.updateTrucks(this.truck)
.subscribe(
(truck) => {
console.info(truck);
this.router.navigate([''])
}, (error) => {
console.info(error);
});
}
}
hasError(field: string, error: string) {
const ctrl = this.truckForm.get(field);
return ctrl.dirty && ctrl.hasError(error);
}
isInvalidAndDirty(field: string) {
const ctrl = this.truckForm.get(field);
return !ctrl.valid && ctrl.dirty;
}
это часть моего грузовика html для компонента грузовика
<table class = "table table-striped">
<thead class = "thead-inverse">
<tr>
<th>TruckId</th>
<th>TruckCode</th>
<th>purchasedDate</th>
<th>descriptions</th>
<th></th>
</tr>
</thead>
<tbody>
<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.description}}</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" (click) = "updateTruck(truck)" >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>
Вы можете решить эту проблему, используя ActivatedRoute:
.
Шаг 1: [routing.ts]
const routes = [ { path: 'edit/:id', component: EditTruckComponent }, ... ]
Шаг 2: [TrucksComponent.ts] при навигации по
updateTruck(truckId) { this.router.navigate([`/edits/${truckId}`])
Шаг 3: [EditTruckComponent.ts] Нам нужно использовать форму ActivatedRoute @ angular / router
contructor( ..., private route: ActivatedRoute, ... ) { }
Шаг 4: [EditTruckComponent.ts] Получить идентификатор из URL
ngOnint() { this.route.params.subscribe((param)) => { console.info(param['id']; }
Шаг 5: Теперь вы получаете идентификатор в [EditTruckComponent], вызываете службу с помощью param ['id'];
this.truckService.getTruckById(param['id']).subscribe(...);
ты подписался на это? httpClient возвращает Observable
Я использую активированные маршруты, моя проблема в том, что когда я нажимаю кнопку "Получить по идентификатору", я маршрутизируюсь, но редактирование для пусто, оно должно содержать сведения о вызываемой мной сущности.