Angular 我如何瞄准一个对象并将其从可观察对象中移除？

我正在使用一项服务从问卷中收集用户的回复。一切都是这样的

export class QuestionShellComponent implements OnDestroy {

    @Input() Data: Question;  //receives data from questionnaire.component

    Response     : UserResponse = {}; //stores user responses



    constructor( private _ans: AnswerService ){}

    ngOnDestroy(){
        this.removeResponse();  //triggers if component toggled off
    }

    grabAnswer(event){          // gets user response from Output on
        this.Response = event;  // input component and stores in Response
        this.sendResponse();
    }

    sendResponse(): void{    // adds response to answer.service
        this._ans.addResponse(this.Response);
    }

    removeResponse(): void{  //removes response from answer.service
        this._ans.deleteResponse(this.Data.id);
    }
}

export class AnswerService {

    private _formList = new Subject<any>();
    public FormList = this._formList.asObservable();

    constructor( private http: Http, private afdb: AngularFireDatabase ){}

    addResponse(event:any){
        this._formList.next(event);
    }

    deleteResponse(event:string){    //the only thing that made sense to try so far

        let target = this._formList.observers.findIndex(a => a.id = event );

        this.FormList.observers.unsubscribe(target);

        console.log(target);

        //let target = this._formList.observers.findIndex( a => a.id = event );

        //this._formList.observers.find( a => a.id = event ).unsubscribe();

        //this._formList.observers[target].unsubscribe();
        //console.log(target);
    }

}

问卷.component.ts：从

question.service.ts

问题shell.component.ts：由

问卷调查.component.ts

用于迭代问题的组件

其他输入组件：多个组件，以适应不同类型的输入数据，通过和

@Output（）

问题shell.component.ts：接收响应并发送到

应答.service.ts

answer.service.ts：接收数据并存储在名为

\u formList

的变量中

question shell.component.ts

类如下所示

export class QuestionShellComponent implements OnDestroy {

    @Input() Data: Question;  //receives data from questionnaire.component

    Response     : UserResponse = {}; //stores user responses



    constructor( private _ans: AnswerService ){}

    ngOnDestroy(){
        this.removeResponse();  //triggers if component toggled off
    }

    grabAnswer(event){          // gets user response from Output on
        this.Response = event;  // input component and stores in Response
        this.sendResponse();
    }

    sendResponse(): void{    // adds response to answer.service
        this._ans.addResponse(this.Response);
    }

    removeResponse(): void{  //removes response from answer.service
        this._ans.deleteResponse(this.Data.id);
    }
}

export class AnswerService {

    private _formList = new Subject<any>();
    public FormList = this._formList.asObservable();

    constructor( private http: Http, private afdb: AngularFireDatabase ){}

    addResponse(event:any){
        this._formList.next(event);
    }

    deleteResponse(event:string){    //the only thing that made sense to try so far

        let target = this._formList.observers.findIndex(a => a.id = event );

        this.FormList.observers.unsubscribe(target);

        console.log(target);

        //let target = this._formList.observers.findIndex( a => a.id = event );

        //this._formList.observers.find( a => a.id = event ).unsubscribe();

        //this._formList.observers[target].unsubscribe();
        //console.log(target);
    }

}

answer.service.ts

文件如下所示

export class QuestionShellComponent implements OnDestroy {

    @Input() Data: Question;  //receives data from questionnaire.component

    Response     : UserResponse = {}; //stores user responses



    constructor( private _ans: AnswerService ){}

    ngOnDestroy(){
        this.removeResponse();  //triggers if component toggled off
    }

    grabAnswer(event){          // gets user response from Output on
        this.Response = event;  // input component and stores in Response
        this.sendResponse();
    }

    sendResponse(): void{    // adds response to answer.service
        this._ans.addResponse(this.Response);
    }

    removeResponse(): void{  //removes response from answer.service
        this._ans.deleteResponse(this.Data.id);
    }
}

export class AnswerService {

    private _formList = new Subject<any>();
    public FormList = this._formList.asObservable();

    constructor( private http: Http, private afdb: AngularFireDatabase ){}

    addResponse(event:any){
        this._formList.next(event);
    }

    deleteResponse(event:string){    //the only thing that made sense to try so far

        let target = this._formList.observers.findIndex(a => a.id = event );

        this.FormList.observers.unsubscribe(target);

        console.log(target);

        //let target = this._formList.observers.findIndex( a => a.id = event );

        //this._formList.observers.find( a => a.id = event ).unsubscribe();

        //this._formList.observers[target].unsubscribe();
        //console.log(target);
    }

}

导出类应答服务{
private _formList=新主题（）；
public FormList=this.\u FormList.asObservable（）；
构造函数（私有http:http，私有afdb:AngularFireDatabase）{}
addResponse（事件：任意）{
此._formList.next（事件）；
}
deleteResponse（event:string）{//到目前为止，唯一有意义的尝试是
让target=this.\u formList.observators.findIndex（a=>a.id=event）；
this.FormList.observer.unsubscribe（目标）；
控制台日志（目标）；
//让target=this.\u formList.observators.findIndex（a=>a.id=event）；
//这个.u formList.observators.find（a=>a.id=event）.unsubscribe（）；
//此._formList.observators[target].unsubscribe（）；
//控制台日志（目标）；
}
}

所有内容都成功加载到

answer.service.ts

文件。我之所以调用

ondestory

方法，是因为用户可能会改变对答案的看法，选择不同的答案，这可能会关闭一层问题，打开另一层问题。从现在开始，如果你不停地来回切换，它会不断添加相同问题的更多实例，因此如果组件关闭，我需要删除它们

从现在起，我得到一个错误，说

无法读取未定义的属性“unsubscribe”

我最初试图只针对

\u formList

，这在

控制台.log（）中给了我一个结果，但有一个错误告诉我

此.\u formList.observers.unsubscribe不是一个函数

我发现
unsubscribe（）
试图找到正确的使用
splice（）
的方法，我认为这正是我需要使用的。我现在迷路了。其他一切都正常工作，控制台正在记录从组件的
ondestory
方法发送的响应，因此这就是问题所在。如果您需要了解有关组件的更多信息，请告诉我，我将发布更多代码
 您可以使用过滤器从可观察对象中删除数据

这个._formList.observators.filter（数据=>（过滤逻辑））
尝试如下：

组件。ts

import { Subscription } from 'rxjs/Rx';

export class Component {

    private _formList = new Subject<any>();
    private subscription: Subscription;

    deleteResponse(event:string){
         this.subscription = this._formList.observers.findIndex(a => a.id = event );
         this.subscription.unsubscribe(); 
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
        this.eventManager.destroy(this.eventSubscriber);
    }

}

从'rxjs/Rx'导入{Subscription}；
导出类组件{
private _formList=新主题（）；
私人认购：认购；
deleteResponse（事件：字符串）{
this.subscription=this.\u formList.observer.findIndex（a=>a.id=event）；
this.subscription.unsubscripte（）；
}
恩贡德斯特罗（）{
this.subscription.unsubscripte（）；
this.eventManager.destroy（this.eventSubscriber）；
}
}
我刚刚更新了帖子，以便更清楚地了解如何设置所有内容。我会在“筛选逻辑”中使用
.splice（）
还是
.unsubscribe（）
。您可以定义返回true或false的筛选逻辑\条件