3

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]

2 Answers 2

8

There are multiple way to do this. Check out this, if I am not late:

updateOrder(id) {
  for(let i = 0; i < this.orderPreparing.length; i++) {
    if (this.orderPreparing[i].Id === id) {
        this.orderPreparing.splice(i, 1);
        break;
    }
  }
}

Hope will work for you.

4
  • This is a good answer, assuming we both understand what the question is asking.
    – VSO
    Nov 23, 2016 at 17:59
  • Oh cool, thanks :) yeah that's what I wanted. I thought I would need to do an indexOf().splice()
    – MrNew
    Nov 23, 2016 at 18:10
  • @AvneshShakya just to follow up, I've updated my question above. Once I remove the id/item I want them to be added in the collection of let say ReadyToPick. See the edit above or shall I create a new question?
    – MrNew
    Nov 23, 2016 at 18:45
  • You need to push in orderPreparing before removing from orderPreparing in if condition: this.addToCollection.push(this.orderPreparing[i]);this.orderPreparing.splice(i, 1); Hope will work for you. Thanks Nov 23, 2016 at 19:04
4

I guess what tou're looking for is deleting it from orderPreparing object (if you, of course, don't have a back-end for deleting it). You can try this one:

updateOrder(id) {
    for(item in orderPreparing) {
        if(item[id] == id) {
            delete this.orderPreparing.item;
        }
    }
}

If you have a back-end app for it, you need to check if there is a script to delete the order on your back-end, made a function to call in your service which is responsible for the communication with your api, then include the service in your component, call a function to delete the order and update the orders once again.

5
  • There will be one, I've updated the original post I've added where I get the data for ngFor.
    – MrNew
    Nov 23, 2016 at 17:58
  • Well atm just to delete it from the UI, because once I click the button it will remove from the Prepare panel then move it to Pickup.
    – MrNew
    Nov 23, 2016 at 18:06
  • I'm sorry @MrNew, but I don't really get what you're asking right now. If you want to delete the item from orderPreparing, you have an answer already, but when you refresh the page, data are going to be refreshed and it will show you the item once again as it is not deleted on the back-end. Nov 23, 2016 at 18:12
  • Yeah I didn't say your answer is wrong, just stating that for now its just removing from the UI :) I've already ticked your answer.
    – MrNew
    Nov 23, 2016 at 18:13
  • I understand. I just didn't get you at first. I've added there the "basics" of how to do that, but without any knowledge of your back-end and file structure I can't tell you exactly how to do it. Nov 23, 2016 at 18:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.