我收到服务器的调查:
{
"id": 870,
"title": "test survay ",
"questions": [
{
"id": 871,
"type": 1,
"displayorder": 0,
"data": "Q- question checkbox ?",
"questionchoice": [
{
"id": 872,
"displayorder": 1,
"data": "a"
},
{
"id": 873,
"displayorder": 2,
"data": "a"
}
]
},
{
"id": 874,
"type": 3,
"displayorder": 0,
"data": "Q- question radiobutton ?",
"questionchoice": [
{
"id": 875,
"displayorder": 1,
"data": "aa"
},
{
"id": 876,
"displayorder": 2,
"data": "bb"
}
]
},
{
"id": 877,
"type": 2,
"displayorder": 0,
"data": "Q- question comment ?",
"questionchoice": []
},
{
"id": 878,
"type": 4,
"displayorder": 0,
"data": "Q- question satrt ?",
"questionchoice": []
}
],
"user": {
"id": 788,
"name": "mohamed",
"email": "[email protected]",
"isadmin": 0,
"statut"**strong text**: 0,
"urlphoto": null,
"iscreated": true,
"answres": [],
"roles": [
{
"id": 2,
"roleName": "MEMBER"
}
],
}
}
以便显示我使用了以下组件:-
component(answer-survay.component)
_ sendrecievesurvay.survay_s.questions:包含调查查询结果如上图所示poster result
app-custom-list-check-box:for:键入1
app-custom-list-radio-button:对于类型3
app-custom-start-button:对于类型4
app-custom-text-area:用于类型2
我给您派对代码组件app-custom-list-check-box
其他组件(应用程序自定义列表单选按钮,应用程序自定义开始按钮,应用程序自定义文本区域)的相同原理]
answer-survay.component.html
<div fxLayout="column" fxFlexAlign="center center" fxLayoutGap="5">
<div class="jc-center">
<div fxFlex="60" fxFlex.xs="100">
<div *ngFor="let question of _sendrecivesurvay.survay_s.questions;let i =index ; ">
<div [ngSwitch]="_sendrecivesurvay.survay_s.questions[i].type">
<div *ngSwitchCase=1>
<app-custom-view-questions [Title]="question.data"></app-custom-view-questions>
<app-custom-list-check-box [isclick]="true"
[questionchoiceInput]="_sendrecivesurvay.survay_s.questions[i].questionchoice">
</app-custom-list-check-box>
</div>
<div *ngSwitchCase=3>
<app-custom-view-questions [Title]="question.data"></app-custom-view-questions>
<app-custom-list-radio-button
[questionchoiceInput]="_sendrecivesurvay.survay_s.questions[i].questionchoice">
</app-custom-list-radio-button>
</div>
<div *ngSwitchCase=4>
<app-custom-view-questions [Title]="question.data"></app-custom-view-questions>
<app-custom-start-button></app-custom-start-button>
</div>
<div *ngSwitchCase=2>
<app-custom-view-questions [Title]="question.data"></app-custom-view-questions>
<app-custom-text-area></app-custom-text-area>
</div>
</div>
</div>
<div class="mt">
<app-footer-form-new-survay [isloading]="false" [isdisplayButtonSend]="true" [isanswer]="true"
(iscliked)="onClick($event)"></app-footer-form-new-survay>
</div>
</div>
1-app-custom-list-check-box.html
<app-custom-checkbox [isclick]="isclick" *ngFor="let questionchoice of questionchoiceInput" [titleCheckbox]="questionchoice.data">
</app-custom-checkbox>
1-app-custom-list-check-box.ts
import { Component, OnInit, Input } from '@angular/core';
import { questionchoice } from 'src/app/Models/question';
import { Questionchoice } from 'src/app/Models/survay';
@Component({
selector: 'app-custom-list-check-box',
templateUrl: './custom-list-check-box.component.html',
styleUrls: ['./custom-list-check-box.component.css']
})
export class CustomListCheckBoxComponent implements OnInit {
@Input() questionchoiceInput: Questionchoice[]
@Input() isclick: boolean = false;
constructor() { }
ngOnInit(): void {
}
}
1.1-app-custom-checkbox.html
<div class="mb5 cent" fxLayout="row">
<mat-card fxFlex class="card" fxLayout="row" fxLayoutGap="10px">
<mat-checkbox [(ngModel)]="isChecked" (click)="isclick">
{{titleCheckbox}}
</mat-checkbox>
</mat-card>
</div>
1.1-app-custom-checkbox.ts
import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { BehaviorSubject, Observable, of, pipe, } from 'rxjs';
import { switchMap, distinctUntilChanged } from 'rxjs/operators';
import { SendAnswerSurvayService } from 'src/app/services/send-answer-survay.service';
@Component({
selector: 'app-custom-checkbox',
templateUrl: './custom-checkbox.component.html',
styleUrls: ['./custom-checkbox.component.css']
})
export class CustomCheckboxComponent implements OnInit, OnDestroy {
private _valueisChecked = false;
private _isChecked = new BehaviorSubject(false);
public get isChecked() {
return this._isChecked.value;
}
public set isChecked(value) {
this._isChecked.next(value)
}
@Input() titleCheckbox: string;
@Input() isclick: boolean = false;
constructor(private sendAnswer: SendAnswerSurvayService) {
}
ngOnDestroy(): void {
}
ngOnInit(): void {
}
}
send-answer-survay.service.ts
import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject, of, timer, interval } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class SendAnswerSurvayService {
listCheckboxBehavior = new BehaviorSubject<number[]>([]);
listCheckBoxObservableinit: Observable<boolean>[] = [of(false)];
}
例如,如果用户回答了问题(复选框问题?)折叠第一个选择,不要选中第二个结果是“ 10”或“ 01”]]
如果用户回答问题(单选按钮类型的问题?)如果第一个选择的结果为“ 1”,第二个选择的结果为“ 2”
对于其他问题,我最后同样希望获得answrers表
"answrers": [ { "data": "10" // answer question checkbox }, { "data": "1" // answer question radiobutton }, { "data": "as question 1" // answer questio area }, { "data": "2" // question type start } ]
我的问题如何按照(屏幕截图)所示读取每个问题的答案以获取答案[]并发送答案(按钮发送)使用反应式X(BehaviorSubject,主题...)
如果问题描述不清楚,请写评论
我从服务器收到调查:{“ id”:870,“ title”:“ test survay”,“ questions”:[{“ id”:871,“ type”:1,“ displayorder”:0,“ ...
在服务中(例如:-dataService)具有这样的行为主题:-