離子2離子3 - 內部ngIf或ngSwitch離子複選框不工作

Question

您好我有一個問題 - 離子2離子3 - 離子的複選框內ngfor並用條件，如ngIf或ngSwitch不工作

我貼我的代碼在網上有工作和不工作的版本..

https://forum.ionicframework.com/t/ionic-2-ionic-3-ion-checkbox-inside-ngif-or-ngswitch-not-working/105099

工作

<ion-list> 
       <ion-item *ngFor=" let answer of question.Answers"> 
          <ion-label>{{answer.Description}}</ion-label> 
          <ion-checkbox (change)="change($event, answer)"></ion-checkbox> 
       </ion-item> 
      </ion-list> 

不工作1

<ion-list> 
       <ion-item *ngFor="let answer of question.Answers"> 
        <ng-container *ngIf="QuestionType.MutipleChoice==question.QuestionType_Id"> 
          <ion-label>{{answer.Description}}</ion-label> 
          <ion-checkbox (change)="change($event, answer)"></ion-checkbox> 
        </ng-container>      
       </ion-item> 
      </ion-list> 

不靈2

<ion-list> 
       <ion-item *ngFor=" let answer of question.Answers"> 
        <ng-container [ngSwitch]="question.QuestionType_Id"> 
         <ng-container *ngSwitchCase="QuestionType.MutipleChoice"> 
          <ion-label>{{answer.Description}}</ion-label> 
          <ion-checkbox (change)="change($event, answer)"></ion-checkbox> 
         </ng-container> 
        </ng-container> 
       </ion-item> 
      </ion-list> 

這一個是工作，但只有等到我想要進入裏面的複選框... 使用模板試過，跨度標籤而不是NG-容器...等...

<ion-list> 
       <ion-item> 
        <div *ngFor="let answer of question.Answers"> 
         <div [ngSwitch]="question.QuestionType_Id"> 
          <span *ngSwitchCase="QuestionType.YesNo"> 
               <span *ngIf="answer.Description=='Yes'" style=" display: inline-block;"> 
                  <button ion-fab right><ion-icon name="checkmark"></ion-icon></button> 
                 </span> 
               <span *ngIf="answer.Description=='No'" style=" display: inline-block;"> 
                   <button ion-fab color="danger" left><ion-icon name="close"></ion-icon></button> 
                 </span> 
          </span> 
          <ng-container *ngSwitchCase="QuestionType.OneChoise"> 
           {{ answer.Description }} 
          </ng-container> 
          <ng-container *ngSwitchCase="QuestionType.MutipleChoice"> 
           {{ answer.Description }} 
           <!-- <ion-label>{{ answer.Description }}</ion-label> --> 
           <!-- <ion-checkbox color="dark" checked="answer.checked" [(ngModel)]="answer.checked"></ion-checkbox> 
              --> 
          </ng-container> 

         </div> 
        </div> 
       </ion-item> 
      </ion-list> 

的ngSwitch適用於其他類型LIK電子 - 是的，或者一個選擇，但添加離子複選框時不在這裏。 json也在工作，這意味着沒有複選框或沒有開關，我可以看到多個選項。

任何想法，我可以解決這個問題？我錯過了什麼？ Puling現在聽到一天...

有沒有人解決它？

Answer 1

我認爲這將解決問題。

export class HomePage { 
 
    
 
    questions = [{id:1,text:'Question 1', answers:[{id:1},{id:2}]},{id:2,text:'Question 2', answers:[{id:11},{id:22}]}] 
 
    
 
    constructor(private navController: NavController, private service: Service, private formBuilder:FormBuilder) { 
 
    this.surveyForm = this.formBuilder.group({ 
 
     questions: formBuilder.array([]) 
 
    }) 
 

 
    for (var i = 0; i < this.questions.length; i++) { 
 
     // get multiple 
 
     let question = formBuilder.group({ 
 
      question_id: [this.questions[i].id, Validators.required], 
 
      answer_ids: formBuilder.array([]) 
 
     }); 
 
     this.surveyForm.controls['questions'].push(question); 
 
    } 
 
    } 
 

 
    onChange(id, isChecked, index) { 
 
    const answers = <FormArray>this.surveyForm.controls.questions.controls[index].controls.answer_ids 
 
    
 
    if(isChecked) { 
 
     answers.push(new FormControl(id)) 
 
    } else { 
 
     let idx = answers.controls.findIndex(x => x.value == id) 
 
     answers.removeAt(idx) 
 
    } 
 
    } 
 
}

<ion-header> 
 
    <ion-navbar> 
 
    <ion-title>{{ appName }}</ion-title> 
 
    </ion-navbar> 
 
</ion-header> 
 

 
<ion-content padding> 
 
<div *ngIf="surveyForm"> 
 
    <form [formGroup]="surveyForm"> 
 
     <div formArrayName="questions"> 
 
     <div *ngFor="let question of questions; let i = index" [formGroupName]="i" padding-bottom> 
 
      <ion-row> 
 
      <ion-col col-10> 
 
       <h5>{{ question.text }}</h5> 
 
       <ng-container> 
 
       <ion-list formArrayName="answer_ids"> 
 
        <div *ngFor="let choice of question.answers; let j = index"> 
 
        <ion-item> 
 
         <ion-label style="white-space: normal;">{{ choice.id }}</ion-label> 
 
         <ion-checkbox (ionChange)="onChange(choice.id, $event.checked, i)" value="choice.id"></ion-checkbox> 
 
        </ion-item> 
 
        </div> 
 
       </ion-list> 
 
       </ng-container> 
 
      </ion-col> 
 
      </ion-row> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    
 
    <pre>{{surveyForm.value | json}}</pre> 
 
</ion-content>

http://plnkr.co/edit/yV94ZjypwBgHAlb0RLK2?p=preview 現在嘗試它。