Question

我在角度4中有嵌套* ngfor的问题，我需要做的是删除父ngfor我已经尝试将其设置为null并使用删除并且都不起作用所以我有点选择。基本上如果删除父ng为角度不正常（至少我认为）并抛出错误会发生什么。

你们可以帮助我并向我展示正确的方法来进行嵌套* ngfor，其中可以删除子项，或者现在以角度4表示它是以某种不同的方式完成的吗？

我创建了这个测试组件

＆＃13;

@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'
                    }
                ]
            }
        ]
    }
}

＆＃13;

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

＆＃13;

这是错误，除了试图读取null的项目之外，它不能读取很多内容，如果我尝试删除而不是相同的错误而不是null的undefined，我是否需要告诉数据是否已被更改，那部分不再是神奇的？如果我尝试this.data.categories [0] = []或= {}它更新正常我想要删除数据，因为我想将它传递给服务器，并且因为用户按下删除：＆＃39;（可以＆不相信这样的事情根本不可能吗？

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)

Answer 1

要从Array中删除项目，您应该使用Array.splice(index, length)。

使用delete会使项目变为undefined，但仍然存在（数组的项目）。与设置为null相同。对于您的情况，这将导致错误cannot find something of null/undefined

angular 4嵌套* ngFor删除父错误

1 个答案: