從* ngFor div中的指令獲取值

Question

我在Ionic應用程序中使用帶有模板URL形式的指令，並且將“響應”值存儲在指令中：

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>

反應

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()變量，然后將@Output()按鈕移到該組件內部，以便每次單擊@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;
}

}