イオン2、イオン3 - などngIfやngSwitchが</p> <p>を動作しないよう、ngfor内及び条件でイオンのチェックボックス - イオン2、イオン3から

Question

こんにちは働いていない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> 

ワーキング

は は、テンプレート、spanタグの代わりに、NG-コンテナで試してみました...これ1が動作しているが、私は内部のチェックボックスを入力しようとしていますだけまで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> 

を働いていない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> 

を動作していません...など...

<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はリク他のタイプのために働きますe - はいいいえ、または1つの選択肢ですが、ここではイオンチェックボックスを追加しません。 jsonも動作しています。つまり、チェックボックスがない場合やスイッチがない場合、複数のオプションが表示されます。

私はこれをどのように解決できますか？私は何が欠けていますか？ 一日中音が聞こえます...

誰か解決しましたか？

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

は今それをしようとしています。