angular - angular2: *ngFor を使用して動的コンポーネントを作成中に関数を呼び出すことができません

Question

ボタンクリックを使用して動的コンポーネントを手動で作成しました。[追加] ボタンをクリックすると、追加ボタンの横にコンポーネントが作成されます。[削除] ボタンをクリックすると、コンポーネントが削除されます。

プランカー

ここでの問題は、ngFor を使用してコンポーネントを作成しているときに、[削除] ボタンをクリックしているときにコンポーネントを削除できないことです。ngFor を使用してコンポーネントを作成しているときに、Remove 関数呼び出しが行われていないことに気付きました。

私のコードの下：

親コンポーネント:

import{ Component, Input, Output, EventEmitter, ViewContainerRef,      ElementRef, ComponentRef, ComponentResolver,    ViewChild, ComponentFactory } from '@angular/core';
import {ChildCmpt } from './child-cmpt';
import {SharedData } from './SharedData';


    @Component({
        selector: 'my-app',
        templateUrl: 'src/parent-cmpt.html',
        directives: [ChildCmpt]
    })
    export class ParentCmpt {

        myAllNames: any;
        @Input() thing:string;
        //allItems: ItemsAddRemove;
        constructor(private resolver: ComponentResolver, private appItems: SharedData) {
            this.myAllNames = this.appItems.getNames();
        }

        idx:number = 0;

        @ViewChild('location', { read: ViewContainerRef}) location: ViewContainerRef;

        add() {
            this.resolver.resolveComponent(ChildCmpt).then((factory:ComponentFactory<any>) => {
                let ref = this.location.createComponent(factory)
                ref.instance._ref = ref;
                ref.instance._idx = this.idx++;
                ref.instance._thing = this.thing;
                //allItems.push(ref);
                this.appItems.addMyItem(ref);

            });
        }

        submit(a: any) {
            let temp = this.appItems.getMyItem();
            let componentThings = temp.map((compRef) => compRef.instance.thing);
            alert(componentThings);
        }

        removeAll = ():void => {
            // do cleanup stuff..
            this.location.clear();
            this.appItems.removeAll();
        }
    }

子コンポーネント:

import { Component, Input, Output, EventEmitter, ViewContainerRef, ElementRef, ComponentRef, ComponentResolver, ViewChild, ComponentFactory } from '@angular/core';
import {SharedData } from './SharedData';


@Component({
    selector: 'child-cmpt',
    templateUrl: 'src/child-cmpt.html'
})
export class ChildCmpt {
    _ref:ComponentRef<any>;
    _idx:number;
    allVal = [];

    @Input() thing:string;
    public components = [];

    constructor(private resolver: ComponentResolver, private location: ViewContainerRef, private appItems: SharedData) {

    }

    remove() {
        let temp = this.appItems.getMyItem();
        delete temp[temp.indexOf(this._ref)];
        this._ref.destroy();
    }

    add() {

        this.resolver.resolveComponent(ChildCmpt).then((factory:ComponentFactory<any>) => {
            let ref = this.location.createComponent(factory, 0);
            ref.instance._ref = ref;
            ref.instance._idx = this._idx++;
            ref.instance._thing = this.thing;
            //this.allItems.push(ref);
            this.appItems.addMyItem(ref);
        });
    }
}

この問題を解決するのを手伝ってください。どうもありがとうございました。

前もって感謝します。