几个月来我一直纠结于以下问题。我试图通过在父中选择其id(数值)来显示窗体中的对象，以在子中显示它。但是当我在父对象中选择一个对象时，它不会在表单中显示它的值，但是当我记录它时，我可以看到对象已经被选中，我已经通过ngOnInit实例化了它，但仍然得到相同的结果。这一切都与我创建的服务一起工作。
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;
}
}
ngOnInit()只调用一次，在第一个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);
}
}