When populating a component called ContactUpdatableItem within a NgFor, the code looks like this:
<section
class="plContactCreation-listItem"
*ngFor="let contact of contacts$ | async; index as idx"
>
<contact-updatable-item
[contact]="contact" // This line will not work
>
</contact-updatable-item>
</section>
This component listens to changes in the Contact object using an @Input setter:
export class ContactUpdatableItemComponent {
@Input()
set contact(contact: RestaurantLocationContactFragment) {
this.bindContactData(contact);
}
get contact(): RestaurantLocationContactFragment {
return this.modifiedContact$.value;
}
}
The issue is that the @Input setter is only called once when the component loads, and never again. To solve this, updating ContactUpdatableItem to use async makes it work correctly:
<section
class="plContactCreation-listItem"
*ngFor="let contact of contacts$ | async; index as idx"
>
<contact-updatable-item
[contact]="(contacts$ | async)[idx]" // This line will work
>
</contact-updatable-item>
</section>
However, relying on
[contact]="(contacts$ | async)[idx]"Is there a way to achieve this so that the code simply looks like this:
[contact]="contacts"