Focus blocks input (you cant type anything) while iterate using *ngfor over array of objects returned by function. However the same works when array of objects is inside the template. What's the problem?
template
<!-- does not work -->
<div *ngFor="let d of testValues()">
<input (focus)="testFocus($event)" type="text" />
</div>
<!-- works -->
<div *ngFor="let d of [{ a: 0 }, { a: 1 }]">
<input (focus)="testFocus($event)" type="text" />
</div>
component
testValues() {
return [{ a: 0 }, { a: 1 }];
}
testFocus($event: FocusEvent) {
console.log('focus ', $event);
}
CodePudding user response:
Wild guess, but I'd say that's because the focus
event triggers a ChangeDetection.
With that change detection, your method testValues()
will return a new set of values. So the input you clicked has been replaced with a new one and is no longer there.
Edit: Confirmed this is it, the following code fixes it :
private values = [{ a: 0 }, { a: 1 }];
testValues() {
return this.values;
}
Here, when the change detection happens, the value returned by the method is the same instance of your array, so the inputs stay the same.