How can I delete an element from an ngFor
? I have this ngFor
of items which has an Id
as well which I'm passing in the updateOrder()
function so It'd know which item I'm clicking.
getOrdersFromOrigin() {
this.sharedService.getOriginSite()
.subscribe(data => {
this.isLoading = false;
this.orderPreparing = data.Results
})
}
<div class="preparing" *ngFor="let prepare of orderPreparing">
<p> {{ prepare.Item }} </p>
<button class="btn btn-primary" (click)="updateOrder(prepare.Id)">It's Ready</button>
</div>
In my updateOrder
I don't have anything in my updateOrder function as I'm not sure how to delete an element relative to the Id
I pass in the (click)=""
event, it's giving me the Id
just fine.
This updateOrder()
is working as it removes it from the UI, but the idea is once its remove I want to add it to a collection.
updateOrder(id) {
for(let i = 0; i < this.orderPreparing.length; i++) {
if (this.orderPreparing[i].Id === id) {
this.orderPreparing.splice(i, 1);
this.addToCollection.push(this.orderPreparing[i]);
console.log(this.addToCollection);
console.log('Changed Status to AwaitingToPick');
break;
}
}
}
I've added a new private addToCollection = []
to push the removed item
to an array so I can add it in the collection. However the code above only takes the last index
when I add another one to the array it breaks the array becomes [Object{}, undefined]