My issue involves a basic component that iterates over a static array of objects, displaying the content. Once this component is integrated into the larger application, the content appears correctly, but I am unable to register any click events on it. Upon inspecting the element in Chrome by right-clicking and selecting "Inspect," the hierarchy only displays the body tag and does not drill down to the individual element as expected.
Upon manual inspection, it seems that the component is constantly being updated by the DOM (with the div tag flashing). This is puzzling as there should be no changes detected since it is a static array.
Interestingly, when I change the object array to a simple string array ['a', 'b', 'c'], everything works as expected and the DOM stops updating.
The additional elements added to the template outside of the ngFor loop remain unaffected and do not experience constant updates.
I am currently using version 2.4.1
Simplified Component
import { Component } from '@angular/core';
@Component({
selector: 'app-ngfor-test',
templateUrl: './ngfor-test.component.html',
styleUrls: ['./ngfor-test.component.css']
})
export class NgforTestComponent {
get items() {
return [
{
'label': 'a',
'value': 'first'
},
{
'label': 'b',
'value': 'second'
},
{
'label': 'c',
'value': 'third'
}
];
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>Template
<div class="item-container" *ngFor="let item of items">
<label>{{ item.label | uppercase }}</label>
<span>{{ item.value }}</span>
</div>