如何通过从父级到其子级的 id（数值）查找和显示对象

Question

I have been struggling for months with the following. I'm trying to display a object in a form by selecting its id(number value) in the parent to display it in the child. but when I select a object in the parent, it doesn't display its values in the form but when I log it I can see that the object have been selected, I already instantiated it via the ngOnInit but still getting the same result. This all works togther in combination with a service I created.

OverviewTemplate

<div class="container">
  <div class="row">
    <div class="col-4">
      <h2>Scooters in your neighbourhood</h2>
      <table class="table">
        <thead>
        <tr>
          <th scope="col">Tag</th>
          <th scope="col">Status</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let scooter of scooters"
            [ngClass]="scooter.id === selectedScooterId ? 'table-primary': ''"
            (click)="selectScooter(scooter.id)"
        >
          <td>{{ scooter.tag}}</td>
          <td>{{ scooter.status}}</td>
        </tr>
        </tbody>
      </table>
      <div class="float-end">
        <button class="btn btn-success btn-sm" type="button" (click)="addScooter()">Add Scooter</button>
      </div>
    </div>
    <div class="col-6">
      <app-detail33
        *ngIf="selectedScooterId else NoScooterAvailable"
        [editeScooterId]="selectedScooterId">
      </app-detail33>
    </div>
  </div>
</div>
<ng-template #NoScooterAvailable>
  <p>Select a scooter to display it's details!</p>
</ng-template>

OverviewTypescript

import {Component, Input, OnInit} from '@angular/core';
import {ScootersService} from "../../services/scooters.service";
import {Scooter} from "../../models/scooter";


@Component({
  selector: 'app-overview33',
  templateUrl: './overview33.component.html',
  styleUrls: ['./overview33.component.css']
})
export class Overview33Component implements OnInit {

  public selectedScooter: Scooter;
  public selectedScooterId: number;

  constructor(private scooterService: ScootersService) {
  }

  ngOnInit(): void {
  }

  /*  /!**
     * select method 2
     *!/
    onSelected(){
      this.scooterService.scooterSelect.emit(this.selectedScooter);
    }*/

  /**
   * selects the selected scooter
   * @param scooter
   */
  public onSelect(scooter: Scooter) {
    if (scooter == this.selectedScooter) {
      this.selectedScooter = null
    } else {
      this.selectedScooter = scooter
    }
  }

  addScooter() {
    let newScooter = this.scooterService.createNewScooter();
    this.selectedScooter = newScooter;
  }

  /**
   * returns list of scooters
   */
  get scooters(): Scooter[] {
    return this.scooterService.findAll();
  }

  @Input()
  selectScooter(id: number) {
    this.selectedScooterId = id
    console.log(this.scooterService.findById(this.selectedScooterId))
  }

}

DetailTemplate

<div class="container align-content-center">
  <div class="container" align-content-center>
    <ng-template [ngIf]="editedScooter"></ng-template>
      <div class="row">
        <div class="form-floating mb3 scooterDetail">
          <div id="detail-header">
            <span><b>Update scooter </b></span><u>{{editedScooter.tag}}</u><b> with scooter ID: </b>
            <u>{{editedScooter.id}}</u>
          </div>
          <hr>
          <div id="scooter-tag">
            <label>Tag:
              <input [(ngModel)]="editedScooter.tag" class="form-control" placeholder="Tag" type="text"/>
            </label>
          </div>
          <div id="scooter-status">
            <label>Status:</label>
            <select [(ngModel)]="editedScooter.status"
                    class="form-control"
                    label="Pick your status"
                    name="scooterStatus">
              <option value="IDLE">IDLE</option>
              <option value="INUSE">INUSE</option>
              <option value="MAINTENANCE">MAINTENANCE</option>
            </select>
          </div>
          <!--  <select [ngModel]="editedScooter.status" id="scooter-status" class="form-select mat-form-field-type-mat-native-select mb-3">-->
          <!--    <options *ngFor="let status of showScooterDetail.status">{{status}}</options>-->
          <!--  </select>-->
          <div id="gps-location">
            <label for="gps-location">GPS-Location</label>
            <input [(ngModel)]="editedScooter.gpsLocation"
                   class="form-control" placeholder="GPS Location"
                   type="text"/>
          </div>
          <div id="scooter-mileage">
            <label for="scooter-mileage">Mileage</label>
            <input [(ngModel)]="editedScooter.mileage"
                   class="form-control" placeholder="Mileage" type="text"/>

          </div>
          <div id="battery-charge">
            <label for="battery-charge">Battery charge</label>
            <input [(ngModel)]="editedScooter.batteryCharge"
                   class="form-control" placeholder="Battery charge"
                   type="text"/>
          </div>
        </div>
      </div>

  </div>

  <div class="float-end me-3 mt-2">
    <!--    <button class="btn btn-danger btn-sm">Delete</button>
        <button class="btn btn-success btn-sm mx-1">Save</button>
        <button class="btn btn-outline-primary btn-sm mx-0" (click)="clear()">Clear</button>
        <button class="btn btn-outline-primary btn-sm mx-1" (click)="reset()">Reset</button>
        <button class="btn btn-primary btn-sm" (click)="cancel()">Cancel</button>-->
  </div>
</div>

DetailTypescript

import {Component, Input, OnInit, Output} from '@angular/core';
import {ScootersService} from "../../services/scooters.service";
import {Scooter} from "../../models/scooter";

@Component({
  selector: 'app-detail33',
  templateUrl: './detail33.component.html',
  styleUrls: ['./detail33.component.css']
})
export class Detail33Component implements OnInit {

  scooter: Scooter;
  @Input() editedScooter: Scooter = new Scooter();
  @Input() editeScooterId: number;



  constructor(private scooterService: ScootersService) {
  }

  ngOnInit(): void {
    this.scooter = this.scooterService.findById(this.editeScooterId)
  }


}

ServiceTypescript

import {EventEmitter, Injectable, Input} from '@angular/core';
import {Scooter} from "../models/scooter";

@Injectable({
  providedIn: 'root'
})
export class ScootersService {

  private scooters: Scooter[] = [];
  public lastId: number = 30000;
  public ARRAY_SIZE = 8;

  constructor() {
    this.generateRandomScooter()
  }

  /**
   * Creates a new scooter
   */
  public createNewScooter(): Scooter {
    let newScooter = Scooter.createSampleScooter(this.nextId())
    this.scooters.push(newScooter);
    return newScooter;
  }

  /**
   * creates a list of random scooters.
   * parameter: ARRAY_SIZE
   * @private
   */
  public generateRandomScooter(): void {
    for (let i = 0; i < this.ARRAY_SIZE; i++) {
      this.createNewScooter()
    }
  }

  /**
   * retrieves the list of all scooters
   */
  public findAll(): Scooter[] {
    return this.scooters;
  }

  /**
   * retrieves one scooter, identified by a given id
   * @param id
   */
  public findById(id: number): Scooter {
    return this.scooters.find((scooter) => id === scooter.id);

  }

  /**
   * saves a new or changed scooter and returns the updated instance
   * @param scooter
   */
  public save(scooter: Scooter): void {
    const temporary = this.scooters.find((s) => s.id === scooter.id);
    if (temporary === null) {
      this.scooters.push(scooter)
    } else {
      const index = this.scooters.indexOf(temporary)
      this.scooters[index] = scooter;

    }
  }

    /**
     * deletes the scooter identified by the given id
     * @param id
     */
    public deleteById(id: number): void {
      this.scooters = this.scooters.filter((scooter) => scooter.id !== id)
    }

  /**
   * generate next available (unique) id
   */
  private nextId(): number {
    let randomInt = Scooter.getRandomInt(1, 3);
    this.lastId += randomInt;
    return this.lastId;
  }

}

Answer 1

ngOnInit() only called once, after the first ngOnChanges() .

  @Input() set editeScooterId(id:number) {
    this.scooter = this.scooterService.findById(this.editeScooterId);
  }

or

  ngOnChanges(changes: SimpleChanges) {
    if(changes['editeScooterId']){
      this.scooter = this.scooterService.findById(this.editeScooterId);
    }
  }