Deleting element in ngFor not given correct data after that to display

[Alkasih]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

data [
     {name: "jack", background:blob.jack.jpg},
     {name: "rose", background:blob.rose.jpg},
     {name: "philip", background:blob.philip.jpg},
     {name: "paul", background:blob.paul.jpg},
]

I am using a background image for each container with loop of object. And when
deleting one element/object from array in ngFor, it doesn't give the correct background image after that to display, while the object in array and their value are still aranged correctly.

Expected behavior

Minimal reproduction of the problem with instructions

https://stackoverflow.com/questions/47847409/delete-file-value-from-loop-array-will-mess-up-the-container-background-angula

I have opened a question a day ago to SO, but seems like no one can fix it.

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.0.3


Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [X] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[mlc-mlapis]

@Alkasih ... link to SO doesn't work ... also a simple demo on Plunker or Stackblitz is expected ...

[Alkasih]

@mlc-mlapis

This is the link.

https://stackoverflow.com/questions/47847409/delete-file-value-from-loop-array-will-mess-up-the-container-background-angula

I dont know how to setup plunker work with angular., but it should be a simple thing that can be built anywhere.

[Ploppy3]

@Alkasih

• They provide a Angular-Plunker project in the issue's template. You can also reproduce the error on https://stackblitz.com/ which is much easier.
• You can Edit your post instead of adding the new url as a comment and keep the one in the original post broken.

[mlc-mlapis]

@Alkasih ... as @Ploppy3 said ... create a simple repro demo on https://stackblitz.com ... it would be the easiest way for you.

Remember that the first condition for creating an issue here is to have a working reproduction of the problem if at least possible.

[Alkasih]

@Ploppy3 @mlc-mlapis

This work good with angular 5.0.0

https://stackblitz.com/edit/angular-stpwi2?file=app%2Fapp.component.ts

Please this doesn't work with angular 5.0.3

In angular 5.0.3, if I delete one image after adding it, the background image doesn't set up corretly to its container, means that the background image set to another container.

[Alkasih]

Please see the update version, now it doesnt work with this multiple wrapper:

https://stackblitz.com/edit/angular-stpwi2?file=app%2Fapp.component.ts

can you inspect what is the problem?

[mlc-mlapis]

@Alkasih ... hmm, I converted your Stackblitz demo for Angular 4.4.6 but still no problem ...

https://stackblitz.com/edit/angular-ktve3j?file=app%2Fapp.component.ts

[Alkasih]

@mlc-mlapis please see my update version. It is the original view of mine

https://stackblitz.com/edit/angular-stpwi2?file=app%2Fapp.component.ts

[mlc-mlapis]

@Alkasih ... ah, I am a bit confused ... so you know what is exactly the problem?

[Alkasih]

The problem appears when I have multidimensional array to loop it in the view? Can you help, please?

[Alkasih]

https://stackblitz.com/edit/angular-stpwi2?file=app%2Fapp.component.ts

My original code doesn't look like that, I just make it similar. If you have something to ask, you can ask. Not just giving thumbs down and thinking how to fix it actually.

I am not focusing on this actually. But I want to see if it can be fixed.

[Ploppy3]

@Alkasih Giving thumbs down to the people trying to help you is not a good idea either.

Can you please explain the bug? All your stackblitz projects seem to work properly.

[MikeSaprykin]

Stackblitz link worked as expected for me too...Didn’t clearly understand what’s the issue :-)

[mlc-mlapis]

@Alkasih ... the problem is that you don't use a correct syntax for trackBy function.

It should be:
<div *ngFor="...; trackBy: trackByFn"> where

trackByFn(index, item) {
    return item.id;
}

where item.id should be globally unique id. Actually your item is empty so it is not possible to use and your code for *ngFor depends only on a relative order of index ... but this index is misleading because you store a selected image just in <input> DOM node directly but adding and removing you are doing on objData.

So you remove one element from objData[0].image but the relative index of <input> nodes is still the same ... from 0 to the number of nodes ... so it is not possible to exactly identify the right <input> node and the deletion looks that only the last node / image is deleted.

[Alkasih]

Dear @mlc-mlapis,

First of all, thank you for the analyze and that good respond. But, I dont think it is really about trackBy , and even in my view the trackBy doesnt effect anything in that funtionality. When I use a simple array it works good, but when I have nested loop like that, the problem appears. You can try it, and see if it works good with that, tell me how do you make it works good.

I am sorry if I want to know more about this. I am still learning this framework actually.

[mlc-mlapis]

@Alkasih ... so here is a demo how it works with trackBy: https://stackblitz.com/edit/angular-h7zwxm?file=app%2Fapp.component.ts

[alxhub]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[Alkasih]

@mlc-mlapis

I am still not sure what the aim of trackBy in angular is. But in this case, it seems that angular make a simple thing not really easy, especially in built-in functionality. However I am glad to know this, it makes it not all people can really have fun with angular. The more complicated it is, the less people can prove that they are a good programmer. I hope angular don't change too much in next version. Thank you for all people here. You all rock!

[mlc-mlapis]

@Alkasih ... you'r welcome ... I'd like to help if it has a sense ...

The trackBy is still the simple thing ... when *ngFor inserts nodes to DOM then trackBy provides static and unique key for each node. You can see it as 'primary key' from RDBMS world ... it is the equivalent. And this key is the identifier that allow the next run of *ngFor to find out if a node is in DOM or not ... just using the same key.

If there is not that key ... for example when you don't use trackBy ... an implicit default key is used instead ... and as the first (default) option is tracking array items using their object identity. It means that if elements have the exact same values as the previous list, Angular will not be able to find out ... is a new list item already present or not? So a simple solution would be ... guarantee that each object identity is unique. Great ... but how to guarantee this condition on real data without exact algorithm?

As the next it is possible to use relative index in a processed array. But because it has the relative character ... it means that this key always starts at 0 and ends with the number (array.length - 1) and ... it is always true even when you delete some node / element from inside / beginning / end ...

Angular *ngFor ..... and this is not specific for Angular at all - by that way would work any other algorithm in any language ... isn't able to differentiate ... any relative number is still the same before and after ... 5 = 5. There is no hidden information that could be helpful for anybody how to research what is what.

So ... the information supplied by trackBy function should be the static and unique primary key.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}