angular 4 nested *ngFor on delete parent error

Question

I have a problem with nested *ngfor in angular 4, what i need to do is delete parent ngfor i have tried with setting it to null and using delete and neither works so i am kinda out of options. basically what happens if you delete parent ngFor angular misbehaves(at least i think) and throws error.

Can you guys help me out and show me the correct way to do nested *ngfor in which it is possible to remove children, or now in angular 4 it is done on some different way?

i have created this test component

@Component({
    selector: 'test-parent',
    templateUrl: './test.component.html',
})
export class TestComponent {
    constructor() {
        console.log("loaded menu");
        setTimeout( ()=> {
            this.data.categories[1] = null;
        }, 1000);
    };
    data = {
        categories: [
            {
                name: 'name 1',
                items: [
                    {
                        name: 'item 1'
                    },
                    {
                        name: 'item 2'
                    },
                ]
            },
            {
                name: 'name 2',
                items: [
                    {
                        name: 'item 3'
                    }
                ]
            }
        ]
    }
}

<div *ngFor="let c of data.categories">
    {{c.name}}
    <div *ngFor="let i of c.items">
        {{i.name}}
    </div>
</div>

this is the error, can't read much from it other than it tried to read items of null, if i try delete than same error instead of null of undefined, do i somehow need to tell data is changed that part isn't magical any more? If i try this.data.categories[0] = [] or = {} it updates fine the thing is i want to delete data because i want to pass it to server, and because user pressed delete :'( can't believe something like that simply isn't possible?

ERROR TypeError: Cannot read property 'items' of null
at Object.View_TestComponent_1.currVal_0 [as updateDirectives] (TestComponent.html:3)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12613)
at checkAndUpdateView (core.es5.js:12025)
at callViewAction (core.es5.js:12340)
at execEmbeddedViewsAction (core.es5.js:12312)
at checkAndUpdateView (core.es5.js:12026)
at callViewAction (core.es5.js:12340)
at execComponentViewsAction (core.es5.js:12286)
at checkAndUpdateView (core.es5.js:12031)
at callViewAction (core.es5.js:12340)
at execEmbeddedViewsAction (core.es5.js:12312)
at checkAndUpdateView (core.es5.js:12026)
at callViewAction (core.es5.js:12340)
at execComponentViewsAction (core.es5.js:12286)
at checkAndUpdateView (core.es5.js:12031)

Why not splice the array? Is there a reason that would not work? — R. Richards, Apr 09 '17 at 21:28
I have tried it it works with this test scenario but tbh i have like 4 nested for loops trough different components, altought it should work i get this same error — Vjerci, Apr 09 '17 at 21:44

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

For removing item from Array, you should use Array.splice(index, length).

using delete will make the item tobe undefined, but still there(an item of the Array). same with setting to null. And for your situation, this will leads to error cannot find something of null/undefined

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 09 '17 at 21:43

Pengyy

37,383
15
83
73

thank you so much it worked, i thought i have tried it and didn't work, anyway doesn't delete fully deletes member of array? – Vjerci Apr 09 '17 at 21:49
@VjeranMagisterLudi Still have some problem? – Pengyy Apr 09 '17 at 21:51
nop it is fixed, i am doing some extensive testing now – Vjerci Apr 09 '17 at 21:52
what is the difference between splice and delete array[1] – Vjerci Apr 09 '17 at 21:52
1

@VjeranMagisterLudi As answered, `delete` will make the item of the array to be undefined, but still an element of the array. something like change the pointer from the true value to undefined. – Pengyy Apr 09 '17 at 21:54

angular 4 nested *ngFor on delete parent error

1 Answers1