How can I find and display a object by its id(number value) from parent a parent to it's child-CodePudding

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 >
  <div >
    <div >
      <h2>Scooters in your neighbourhood</h2>
      <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 >
        <button  type="button" (click)="addScooter()">Add Scooter</button>
      </div>
    </div>
    <div >
      <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 >
  <div  align-content-center>
    <ng-template [ngIf]="editedScooter"></ng-template>
      <div >
        <div >
          <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"  placeholder="Tag" type="text"/>
            </label>
          </div>
          <div id="scooter-status">
            <label>Status:</label>
            <select [(ngModel)]="editedScooter.status"
                    
                    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" >-->
          <!--    <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"
                    placeholder="GPS Location"
                   type="text"/>
          </div>
          <div id="scooter-mileage">
            <label for="scooter-mileage">Mileage</label>
            <input [(ngModel)]="editedScooter.mileage"
                    placeholder="Mileage" type="text"/>

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

  </div>

  <div >
    <!--    <button >Delete</button>
        <button >Save</button>
        <button  (click)="clear()">Clear</button>
        <button  (click)="reset()">Reset</button>
        <button  (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;
  }

}

CodePudding user response：

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

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

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