Angular - получение значений переключателей в массив объектов - PullRequest
0 голосов
/ 03 декабря 2018

Я работаю над простым вопросом-заявкой.Пользователь получит n + 1 количество вопросов.Каждый вопрос имеет несколько вариантов, которые реализуются с помощью переключателей.Также к каждому вопросу есть возможность добавить комментарий.

Сейчас я работаю над сайтом переднего плана.Я смоделировал некоторые вопросы и хотел бы собрать объект JSON для отправки на сервер.

Моя проблема в том, что я не могу получить так называемые ответы из значений переключателей.

Мой код:

интервьюanswer.ts

export class Interviewanswer
{
  answer: string;
  comment: string;
}

formfill.component.ts

import { Component, OnInit } from '@angular/core';
import {QUESTIONS} from '../mockedData/mock-questions';
import {Interviewanswer} from '../model/interviewanswer';



@Component({
selector: 'app-formfill',
templateUrl: './formfill.component.html',
styleUrls: ['./formfill.component.css']
})
export class FormfillComponent implements OnInit {

  constructor() { }

  questions = QUESTIONS;

  answertypes = ['2 times in a week', '2 times in a month', '2 times in a year', 'Cannot comment'];

  answers: Interviewanswer[];

  name: string;
  position: string;


  ngOnInit() {
  }

  saveData()
  {



    const person =
    {
        name: this.name,
        position: this.position,
        answers: this.answers


    };
 console.log(person);

formfill.component.html

<mat-tab-group>
  <mat-tab label="Personal data">
    <mat-form-field>
      <input matInput placeholder="Name" [(ngModel)]="name">
    </mat-form-field>
    <br>

    <mat-form-field>
      <textarea matInput placeholder="Position" [(ngModel)]="position"></textarea>
    </mat-form-field>
  </mat-tab>
  <mat-tab label="Questions">



    <mat-grid-list cols="3" rowHeight="3:2" *ngFor="let q of questions; let i = index; let a of answers">

      <mat-grid-tile>{{i+1}}.  {{q.question}}</mat-grid-tile>
      <mat-grid-tile>

        <mat-radio-group class="mat-radio-group" [(ngModel)]="a.answer">
          <mat-list>
            <mat-list-item><mat-radio-button [value]=answertypes[0]>2 times in a week</mat-radio-button></mat-list-item>
            <mat-list-item><mat-radio-button [value]=answertypes[1]>2 times in a month</mat-radio-button></mat-list-item>
            <mat-list-item><mat-radio-button [value]=answertypes[2]>2 times in a year</mat-radio-button></mat-list-item>
            <mat-list-item><mat-radio-button [value]=answertypes[3]>Cannot comment</mat-radio-button></mat-list-item>
          </mat-list>
        </mat-radio-group>


      </mat-grid-tile>
      <mat-grid-tile>

        <mat-form-field>
          <textarea matInput placeholder="Comment" [(ngModel)]="a.comment"></textarea>
        </mat-form-field>

      </mat-grid-tile>
    </mat-grid-list>

    <br>
    <button mat-button (click)="saveData()">Save</button>

  </mat-tab>
</mat-tab-group>

Когда я печатаю объект person в консоль, я могу получить имя и положение, но он говорит неопределенный об ответах.Что мне нужно, так это вывод: {name: "Jan", позиция: "developer", ответы: [{answer: "2 раза в неделю", комментарий: "Возможно, даже больше"}, {answer: "Cannotсказать ", комментарий:" Мне нечего комментировать "} ...]

Что мне не хватает?Любая помощь была бы хороша!

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...