Question

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

questionnaire.component.ts ：从question.service.ts收到数据的主要容器
question-shell.component.ts ：questionnaire.component.ts用于迭代问题的组件。
其他输入组件：适合不同类型输入数据的多个组件，可将用户响应发送回question-shell.component.ts至@Output()
question-shell.component.ts ：收到回复并发送给answer.service.ts。
answer.service.ts ：在名为_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);
    }
}

answer.service.ts文件看起来像这样

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文件。我正在调用OnDestroy方法，因为用户可能会改变他们对答案的看法并选择不同的答案，这可能会关闭一层问题并打开另一个问题。截至目前，如果你继续来回切换它会不断添加相同问题的更多实例，所以我需要在组件关闭时删除它们。

截至目前，我收到错误消息

无法读取undefined的属性'unsubscribe'。

我最初只尝试定位_formList，但console.log()给了我一个错误告诉我的结果

this._formList.observers.unsubscribe不是函数

我发现unsubscribe()试图找到使用splice()思考的正确方法，这是我需要使用的。我现在迷失了。其他所有工作正常，控制台正在记录从组件的OnDestroy方法发送的响应，因此这必须是问题所在。如果您需要了解有关组件的更多信息，请通知我，我将发布更多代码。

Answer 1

您可以使用过滤器从Observable中删除数据。

this._formList.observers.filter（data =＆gt;（filter logic））

Answer 2

试试这样：

<强> component.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);
    }

}

如何从Observable中定位和删除主题？

2 个答案: