如何使用angular,Reactivex,Rxjs阅读答案列表

问题描述 投票:-1回答:1

我收到服务器的调查:

{
    "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,“ ...

angular typescript rxjs
1个回答
0
投票

在服务中(例如:-dataService)具有这样的行为主题:-

© www.soinside.com 2019 - 2024. All rights reserved.