Question

我在我的离子应用程序中使用带有模板URL的指令作为表单，并且我将“response”值存储在指令中：

questionForm.ts

import {Component, Input} from "@angular/core";

@Component({
selector: "question-form",
templateUrl: 'questionForm.html'
})
export class QuestionFormComponent {

@Input() public question: any;
@Input() public indexQuestion: number;
public response: any = {};

constructor() {

    this.response.value = "";
    this.response.values = [];
    this.response.remark = "";
}

ngOnInit() {
    this.response.questionId = this.question.id;
}

questionForm.html

<div class="question-form">
<form action="">
    <h1>
        Question {{indexQuestion+1}}
    </h1>
    <hr>
    <div class="question-content">
        <div class="question">
            {{question.question}}
        </div>

        <div>
            <div *ngIf="question.responseType == 'radio'">
                <div *ngFor="let choice of question.choices">

                    <input id="choice{{choice.id}}" class="with-gap" type="radio"
                           [(ngModel)]="response.value" name="choice"
                           value="{{choice.id}}">
                    <label for="choice{{choice.id}}">{{choice.value}}</label>
                </div>
                <div *ngIf="question.choiceOther">
                    <input class="with-gap" id="choiceOther" type="radio" [(ngModel)]="response.value" name="choice"
                           value="other">
                    <label for="choiceOther">Autre</label>
                    <textarea name="choiceOther" *ngIf="response.value=='other'"></textarea>
                </div>
            </div>
            <div *ngIf="question.responseType == 'liste'">
                <div class="select-container">
                    <select name="choice" [(ngModel)]="response.value">
                        <option *ngFor="let choice of question.choices" value="{{choice.id}}">{{choice.value}}
                        </option>
                        <option *ngIf="question.choiceOther" value="other">Autre</option>
                    </select>
                </div>
                <div *ngIf="question.choiceOther">
                    <textarea name="choiceOther" *ngIf="response.value=='other'"></textarea>
                </div>
            </div>
            <div *ngIf="question.responseType == 'coche'">
                <div *ngFor="let choice of question.choices">
                    <input class="filled-in" id="choiceBox{{choice.id}}" type="checkbox"
                           [(ngModel)]="choice.selected" name="choice" value="{{choice.id}}">
                    <label for="choiceBox{{choice.id}}">{{choice.value}}</label>
                </div>
                <div *ngIf="question.choiceOther">
                    <input id="choiceBoxOther" class="filled-in" type="checkbox" [(ngModel)]="response.value"
                           name="choice" value="other">Autre<br>
                    <textarea name="choiceOther" *ngIf="response.value=='other'"></textarea>
                </div>
            </div>

            <div *ngIf="question.responseType == 'jauge'">
                <ion-item>
                    <ion-range [(ngModel)]="response.value" name="value" min="1" max="10" step="1" snaps="true">
                        <ion-label range-left>{{question.leftLabel}}</ion-label>
                        <ion-label range-right>{{question.rightLabel}}</ion-label>
                    </ion-range>
                </ion-item>
            </div>
            <div *ngIf="question.responseType == 'text'">
                <textarea name="text" [(ngModel)]="response.reponseLibre"></textarea>
            </div>

        </div>
        <div *ngIf="question.choiceOther">
            <label>
                Remarques complementaires (facultatif)
            </label>
            <textarea name="remark" [(ngModel)]="response.remark"></textarea>
        </div>
    </div>
</form>

我在一个页面中使用它，在* ngFor中处理多个问题：

response.html

<page-template [hideButtomButton]="true" titlePage="Reponse" classPage="response-page">

<ion-card>
    <ion-card-content>

        <div *ngFor="let question of currentQuestionnaire.questions; let indexQuestion = index">
            <question-form [question]="question" [indexQuestion]="indexQuestion"></question-form>
        </div>
        <!-- I want to get all question-form's "response" value for submitResponses()-->
        <button class="emy-btn emy-btn-pink" (click)="submitResponses()">Submit</button>

    </ion-card-content>
</ion-card>

response.ts

import {Component} from "@angular/core";
import {QuestionnaireService} from "../../providers/web-service/questionnaire-service";
import {NavParams} from "ionic-angular";

@Component({
templateUrl: 'response.html',
providers: [QuestionnaireService]
})
export class ResponsePage {

public currentQuestionnaire: any;
public cleared: boolean = false;
public responses: any = [];

constructor(private questionnaireService: QuestionnaireService, public navParams: NavParams) {
    this.currentQuestionnaire = navParams.get("questionnaire");
}

submitResponses() {
    // I'll need the responses here
}

}

现在，我想要的是获取* ngFor中所有问题形式的值“响应”并在submitResponses中使用它们，但我不知道如何检索它们。

Answer 1

您必须使用EventsEmitter将数据从子组件传递到父组件。在QuestionFormComponent声明一个@Output()变量并获取该组件内部的提交按钮，以便每次单击提交按钮时，response对象都将返回到submitResponses()

// questionForm.ts
QuestionFormComponent{

 public response: any = {};

 @Output()
 responseEmitter = new EventEmitter<any>();

 onSubmit(){
  this.responseEmitter.emit(this.response);
 }

}

和

    // response.html

 <div *ngFor="let question of currentQuestionnaire.questions; let 
 indexQuestion = index">
<question-form (responseEmitter)='submitResponses($event)' [question]="question" indexQuestion]="indexQuestion"></question-form>
 </div>

然后

// response.ts
export class ResponsePage {

submitResponse(event:any){
 let responseObject=event;
}

}

从* ngFor div中的指令获取值

1 个答案: