I am newly Angular 12 developers. I working Angular project using form array select multiple questions and click the next button question listed and jump options provided when click on select option remove previous and current questions. I have to face issue please help me how to fix the issue?

<div  *ngIf="isRedirectToQaOption">
                      <label for="">Questions</label>
                      <div formArrayName="questions">
                        <div *ngFor="
                        let qArray of questionData().controls;
                        let ind = index
                      ">
                          <div  [formGroupName]="ind">
                            <div >
                              <div  style="line-height: 32px;font-weight: 700;margin-right: -40px;">
                                Q{{ind 1}}</div>
                              <div >
                                <div  style="position:relative">
                                  <input type="text" name="question"  formControlName="question"
                                    readonly>
                                  <input type="hidden" name="questionId" 
                                    formControlName="questionId">
                                  <input type="hidden" name="type"  formControlName="type">
                                </div>
                              </div>
                            </div>
                            <div  formArrayName="options">
                              <div  *ngFor="
                              let optCtrl of optionsData(ind)
                                .controls;
                              let optIndex = index
                            ">
                                <div  [formGroupName]="optIndex">
                                  <div >
                                    <div >
                                      <label for="" *ngIf="optIndex===0 ">Option {{isQuestionType}}</label>
                                      <input type="text" name="option" id="option_{{ optIndex }}0"
                                         formControlName="option" readonly />
                                    </div>
                                  </div>
                                  <div >
                                    <div >
                                      <label for="" *ngIf="optIndex===0 ">Next Question <strong>(Select jump
                                        question)</strong></label>
                                      <!-- <ng-select [clearable]="false" [items]="overallQuestionArray"
                                        bindLabel="question" bindValue="linkedId" id="jumpto{{optIndex}}0"
                                        formControlName="jumpto" >
                                        <ng-template ng-option-tmp let-item="item">
                                          <div title="{{item.question}}">{{item.question}}</div>
                                          </ng-template>
                                      </ng-select> -->
                                      <select name="jumpto" id="jumpto{{optIndex}}0" 
                                        formControlName="jumpto">
                                        <option value="" disabled></option>
                                        <ng-container *ngFor="let item of overallQuestionArray;let i=index;" >
                                          <option *ngIf="overallQuestionArray.length > 1" [value]="item.linkedId" [title]="item.question">Q{{i 1}}. {{item.question}}</option>
                                     </ng-container>
                                        <!-- <option
                                          [value]="item.linkedId" [title]="item.question">
                                          Q{{i 1}}. {{item.question}}</option> -->
                                      </select>
                                    </div>
                                  </div>
                                  <div >
                                    <div  *ngIf="qtConfigId!='N'">
                                      <label for="" *ngIf="optIndex===0 ">In Eligible Policies</label>
                                      <ng-select [items]="getAvailPolicies" bindLabel="policy_code"
                                        bindValue="policy_id" [multiple]="true" [clearable]="false"></ng-select>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

CodePudding user response：

Your code is horrendous but I get the request so I can answer broadly.

Use a getter to get your options :

  question?: any;
  private _questions = [
    { id: 0, label: 'Do you like sushis ?', answers: ['Yes', 'No'] },
    { id: 0, label: 'Do you like pizzas ?', answers: ['Yes', 'No'] },
    { id: 0, label: 'Do you like dogs ?', answers: ['Yes', 'No'] },
  ];

  get questions() {
    return this._questions.fitler(q => q !== this.question);
  }
  // Solution 2
  questions = [];


  setQuestion(question) {
    this.question = question;
    // Solution 2
    this.questions = this._questions.fitler(q => q !== this.question);
  }

Use the first solution if you have a push change detection, use the solution 2 if you don't have it.