Как получить по идентификатору и перейти к форме редактирования в другом компоненте

У меня есть сервис в 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>
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
356
1

Ответы 1

Вы можете решить эту проблему, используя 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(...);

Я использую активированные маршруты, моя проблема в том, что когда я нажимаю кнопку "Получить по идентификатору", я маршрутизируюсь, но редактирование для пусто, оно должно содержать сведения о вызываемой мной сущности.

valik 11.04.2018 12:21

ты подписался на это? httpClient возвращает Observable

Joe Lee 11.04.2018 15:29

Другие вопросы по теме