I've encountered an unusual issue while working with Angular 10.
The problem arises when I remove a specific element, everything functions correctly. The desired behavior is that when the div.passRide is clicked on, it should update another component using the updateViewer(passRide.id) method to fetch and display a particular record.
However, when I try to retrieve certain fields from getCrewDiagram(id) in selector.ts, it seems like every div has been clicked on, causing the viewer to update and display the last item in the list of divs consistently.
I have come across similar questions here, but they don't address my specific issue. I suspect it might be something fundamental that I'm overlooking.
selector.htm:
<div id="passes">
<div class="passRide" *ngFor="let passRide of context.getPassRides();" (click)="updateViewer(passRide.id)">
<p>{{ getCrewDiagram(passRide.id).header.diagNumber }}</p> <<<---- problematic element here
<table>
<tr *ngFor="let event of passRide.events">
<td>{{ event.activity.diagramActivity }}</td>
<td>{{ event.noteLine ? event.note : (event.reliefLine ? event.reliefs : event.location.shortDesc) }}</td>
<td>{{ event.activity.diagramActivity == "DEP" || event.activity.diagramActivity == "ARR" ? event.eventTime : ""}}</td>
<td>{{ event.activity.diagramActivity == "DEP" ? event.wttid : ""}}</td>
</tr>
</table>
</div>
</div>
selector.ts
import { Component, OnInit } from '@angular/core';
import { CrewDiagram } from '../../core/crew-diagram';
import { DiagramSetService } from '../../core/current-diagram-set.service';
@Component({
selector: 'app-selector',
templateUrl: './selector.component.html',
styleUrls: ['./selector.component.css']
})
export class SelectorComponent implements OnInit {
constructor(public context: DiagramSetService) { }
ngOnInit() {
}
updateViewer(index: number) : void {
this.context.setCrewDiagram(index);
}
updateViewerDebug(index: number, $event): void {
console.log($event)
this.context.setCrewDiagram(index);
}
getCrewDiagram(id: number): CrewDiagram {
return this.context.getCrewDiagram(id);
}
}
diagram-set-service.ts
import { Injectable } from '@angular/core';
import { CrewDiagram } from './crew-diagram';
import { CrewPuzzlePiece } from './crewPuzzlePiece/crew-puzzle-piece';
@Injectable({
providedIn: 'root'
})
export class DiagramSetService {
constructor() { }
crewDiagrams: CrewDiagram[] // Original set from which the following are derived
crewDiagram: CrewDiagram // Current crew diagram (used by viewer/diagramViewer)
filteredView: CrewDiagram[] // Diagrams on show at the moment
passRides: CrewPuzzlePiece[] // Diagram puzzle pieces representing passing moves
getCrewDiagrams(): CrewDiagram[] {
return this.crewDiagrams;
}
getFilteredDiagrams(): CrewDiagram[] {
return this.filteredView;
}
setCrewDiagrams(crewDiagrams: CrewDiagram[]) {
this.crewDiagrams = crewDiagrams;
this.filteredView = crewDiagrams;
}
getCrewDiagram(id: number): CrewDiagram{
console.log("getCrewDiagram" + id);
return this.crewDiagram = this.crewDiagrams.
filter(
function (diagram, index, array) {
return diagram.id == id;
}
)[0];
}
setCrewDiagram(id: number): void {
this.crewDiagram = this.getCrewDiagram(id);
console.log("setCrewDiagram" + id);
}
getNumberCrewDiagrams() {
if (!this.crewDiagrams) {
return 0;
}
return this.crewDiagrams.length;
}
getCurrentCrewDiagram() {
return this.crewDiagram;
}
filterCrewsByDepot(depotString: string): void {
const depots = depotString.split(' ');
this.filteredView = this.crewDiagrams.filter(function (diagram) {
return depots.includes(diagram.header.depot);
});
}
resetView(): void {
this.filteredView = this.crewDiagrams;
}
setPassRides(passRides: CrewPuzzlePiece[]): void {
this.passRides = passRides;
}
getPassRides(): CrewPuzzlePiece[] {
return this.passRides;
}
}
Debug output when the problematic element is removed: https://i.sstatic.net/MyaCk.png
Debug output when the problematic element is present: https://i.sstatic.net/kWX9q.png