2

嗨，我有一个问题 - Ionic 2 ionic 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-container……等等……</p> 

<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 适用于其他类型，例如 - yes no 或 one selection ，但在添加 ion 复选框时不在此处。json 也可以工作，这意味着没有复选框或没有开关，我可以看到多个选项。

有什么想法可以解决这个问题吗？我错过了什么？普灵听了一天……</p>

有人解决了吗？

4

1 回答 1

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 现在试试。

于 2017-09-14T07:12:04.047 回答