Angular父子组件传值问题：选中对象无法在子组件表单显示

核心问题点 #

1. 子组件初始化逻辑仅执行一次：ngOnInit只在组件首次创建时运行，当父组件选中不同scooter导致editeScooterId变化时，子组件不会重新获取最新的scooter数据。
2. 数据绑定不匹配：子组件模板绑定的是editedScooter，但ngOnInit中把服务获取到的scooter赋值给了this.scooter，没有更新editedScooter，导致表单无数据。
3. 父组件方法错误使用@Input：selectScooter是父组件的点击事件处理方法，不需要@Input装饰器，这会导致不必要的属性绑定冲突。
4. 无效的模板判断：子组件中的<ng-template [ngIf]="editedScooter"></ng-template>不会渲染任何内容，无法起到数据为空时的判断作用。

分步修正代码 #

1. 修正父组件（Overview33Component）

去掉selectScooter方法上的@Input装饰器：

// 修正后代码
selectScooter(id: number) {
  this.selectedScooterId = id
  console.log(this.scooterService.findById(this.selectedScooterId))
}

2. 修正子组件（Detail33Component）

• 使用ngOnChanges监听输入属性变化，每次editeScooterId更新时重新获取数据并赋值给editedScooter
• 移除无效的ng-template判断，给容器div加上*ngIf避免空值报错

修正后的DetailTypescript：

import {Component, Input, OnInit, OnChanges, SimpleChanges} 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, OnChanges {

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

  constructor(private scooterService: ScootersService) {
  }

  ngOnInit(): void {
    this.loadScooterData();
  }

  // 监听输入属性变化
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['editeScooterId'] && changes['editeScooterId'].currentValue) {
      this.loadScooterData();
    }
  }

  private loadScooterData(): void {
    if (this.editeScooterId) {
      const scooter = this.scooterService.findById(this.editeScooterId);
      if (scooter) {
        this.editedScooter = {...scooter}; // 浅拷贝避免直接修改原对象，可根据需求调整
      }
    }
  }
}

修正后的DetailTemplate：

<div class="container align-content-center" *ngIf="editedScooter">
  <div class="container align-content-center">
    <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>
        <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>

额外优化建议 #

• 统一输入属性拼写：把editeScooterId改为editedScooterId（父组件模板和子组件输入属性同步修改），避免拼写错误导致的潜在问题。
• 若需要保存修改后的数据，可在子组件添加@Output事件，通知父组件或服务执行保存逻辑。

内容的提问来源于stack exchange，提问作者Sick1Webby