Currently, I am utilizing a service to gather user responses from a questionnaire. The sequence of events is outlined below:
- questionnaire.component.ts : serves as the main container that receives data from
question.service.ts - question-shell.component.ts : Component utilized by
questionnaire.component.tsto iterate through questions. - Misc input components : Various components designed for different types of input data, which transmit the user response back up to
question-shell.component.tsthrough an@Output(). - question-shell.component.ts : accepts the response and forwards it to
answer.service.ts. - answer.service.ts : receives the data and stores it in a variable named
_formList.
The structure of the question-shell.component.ts class is detailed below:
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){ // retrieves user response from Output on
this.Response = event; // input component and stores it 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);
}
}
The content of the answer.service.ts file is provided below:
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);
}
}
All data successfully loads into the answer.service.ts file. The reason why I'm calling the OnDestroy method is because users may switch their answers, potentially closing one set of questions while opening another. Currently, when switching back and forth between answers, more instances of the same questions are being added instead of replacing them. This is why I need to delete previous responses when a component closes.
However, I am encountering an error message stating:
Cannot read property 'unsubscribe' of undefined.
In my initial attempt, I tried targeting just _formList, resulting in an error with the console.log() output indicating:
this._formList.observers.unsubscribe is not a function
I came across the unsubscribe() method while trying to figure out how to properly use splice(), believing that was the solution needed. At this point, I feel lost. Everything else functions correctly, and the responses sent from the component's OnDestroy method are logged in the console, pointing to this issue as the probable cause. If more code snippets would help in understanding the situation better, please let me know, and I'll provide them promptly.