Within the acceptRequest function in child.component, the commissioner.requestAccepted property is set to false, and then the updated commissioner object is returned.
Ideally, I want the button to be automatically removed from the view once the object is updated, but currently, this isn't happening. I have to manually refresh the page for the button to disappear.
Snippet from parent.component.ts:
commissioners: any[];
ngOnInit() {
this.usersService.getCommissioners().subscribe(
res => {
this.commissioners = res.commissioners;
},
err => {
console.log(err);
}
)
}
Snippet from parent.component.html:
<child-list *ngIf="commissioners" [commissioners]="commissioners"></child-list>
Snippet from child.component.ts:
@Input() commissioners: any[];
ngOnChanges(changes: SimpleChange) {
this.commissioners = changes['commissioners'].currentValue;
}
acceptRequest(commissionerId) {
this.usersService.acceptRequest(commissionerId)
.subscribe(
res => {
for (let commissioner of this.commissioners) {
if (commissioner._id == res._id) {
console.log(commissioner); //old object (requestAccepted: false)
commissioner = res;
console.log(commissioner); //new object (requestAccepted: true)
break;
}
}
},
err => {
console.log(err);
});
}
Snippet from child.component.html:
<div *ngFor="let commissioner of commissioners">
<button *ngIf="!commissioner.requestAccepted" class="btn btn-primary" (click)="acceptRequest(commissioner._id)">Accept</button>
</div>