I'm encountering a peculiar issue with an ngFor loop that handles new data being added to the source array. The newly added elements are briefly displayed in the DOM but then disappear almost instantly. I've found a workaround by manually calling the ChangeDetector's detectChanges method, although it's worth noting that the element remains visible for a longer period when running in production mode. I've carefully checked all components to ensure they're not being reloaded and scrutinized API calls to confirm that the data isn't being refetched, leading me to believe that the root cause lies in the removal of data from the source array immediately after addition.
The fresh data is delivered to the application through a SignalR event, which makes me question if there might be some connection there. While I suspect the issue originates from my own logic, I'm struggling to identify any factors that could possibly trigger this behavior.
The boardEntries array in the BoardColumnComponent is where the data gets appended.
BoardColumnComponent.ts
export class BoardColumnComponent implements OnInit {
@Input() columnIndex: number;
@Input() columnData: BoardColumnModel;
@Input() boardEntries: Array<BoardEntryModel>;
backgroundColour: string;
constructor(private signalEventsService: SignalEventsService,
private changeDetector: ChangeDetectorRef,
private applicationRef: ApplicationRef) { }
ngOnInit() {
console.log ("Column Init")
this.backgroundColour = BoardColours[this.columnIndex];
this.signalEventsService.boardDataEventEmitter.subscribe(res => {
var boardEntryModel = new BoardEntryModel();
Object.assign(boardEntryModel, res);
if (boardEntryModel.ColumnIndex == this.columnIndex) {
this.boardEntries.push(boardEntryModel);
this.changeDetector.detectChanges();
}
});
}
Below is the HTML code:
board-column.component.html
<div class="board-column" [style.background-color]="backgroundColour">
<div class="board-column-header">
<h3>{{ columnData.ColumnName }}</h3>
</div>
<app-board-entry *ngFor="let boardEntry of boardEntries" [boardEntry]="boardEntry"></app-board-entry>
</div>
Next, we have the board-entry.component.ts file:
export class BoardEntryComponent implements OnInit {
@Input() boardEntry: BoardEntryModel;
constructor() { }
ngOnInit() {
console.log ("Entry Init")
}
}
And its corresponding HTML template:
<div class="board-entry-container">
<p>{{ boardEntry.EntryContent }}</p>
</div>
If more code is needed for further assistance, please let me know. Any help would be greatly appreciated.