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>

这个工作正常，但直到我试图进入里面的复选框... 尝试使用模板，span标签而不是ng-container ......等等......

<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适用于其他类型，例如 - 是，或一个选项，但在添加离子复选框时不在此处。 json也在工作，意思是没有复选框或没有开关我可以看到多个选项。

我有什么想法可以解决这个问题？我错过了什么？ Puling现在听了一天......

有人解决了吗？

Answer 1

我认为这样可以解决问题。

＆＃13;

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)
    }
  }
}

＆＃13;

<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>

＆＃13;

http://plnkr.co/edit/yV94ZjypwBgHAlb0RLK2?p=preview 现在试试吧。

离子2离子3 - 离子复选框在ngIf或ngSwitch内部不起作用

1 个答案: