Блог

Я пишу код в Angular, в котором я хочу передать автоматически присваиваемое значение из главной панели вопросов в подзапросы. Итак, у меня есть один основной вопрос с 10 кнопками и три подзапроса с теми же 10 кнопками. Что я хочу сделать, так это сделать что-то, что передает выбор от основного вопроса к подзапросам (например, если я выбрал кнопку с номером 6 в главном вопросе, подзапросы автоматически также выбирают номер 6)

Мой родительский компонент TS

     import { Component, OnInit } from '@angular/core';
import { StepService } from '../step.service';

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

  public colorArray: string[]= ['#1FB90E', '#31DE1E', '#50DF41', '#CCFF99', '#FFFFCC', '#FFFF66', '#FFFF00', '#F79D36', '#FF8000', '#FF0000']

  constructor(private stepService: StepService) { }

  ngOnInit(): void {
  }

  nextStep(){
    this.stepService.step.next(1);
  }

  getAnswerValue(value: number): number{
    return value
  }

}
 

В HTML

  <div>
  <button (click)="nextStep()" *ngFor="let color of colorArray; let i = index"
    [style.background-color]="color"
    (click)="getAnswerValue(i   1)"
    class="przycisk"
  ></button>
</div>
 

Дочерний компонент в TS

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

@Component({
  selector: 'app-additional-questions',
  templateUrl: './additional-questions.component.html',
  styleUrls: ['./additional-questions.component.sass']
})
export class AdditionalQuestionsComponent implements OnInit {
  selectedQuestion: string= 'Our question';

  @Input() getAnswerValue: number;

  private questionType =  QuestionType;

  board: IQuestion[] = [
    {
      id: 0,
      questionType: this.questionType.checkBox,
      question: 'jakies pytanie',
      answerValue: 0,
    },
    {
      id: 1,
      questionType: this.questionType.squares,
      question: 'jakies pytanie',
      answerValue: 0,
    },
    {
      id: 2,
      questionType: this.questionType.dataPicker,
      question: 'jakies pytanie',
      answerValue: 0,
    }
  ]

  constructor() { }

  ngOnInit(): void {
  }

}

export interface IQuestion {
  id: number;
  questionType: QuestionType;
  question: string;
  answerValue: number;
}

export enum QuestionType{
  checkBox= 0,
  squares = 1,
  dataPicker = 2,
}
 

Дочерний компонент в HTML

 <mat-accordion>
  <mat-expansion-panel hideToggle *ngFor="let elmentOfBoard of board ;let i = index">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Additional question {{ i   1 }}
      </mat-panel-title>
  </mat-expansion-panel-header>
    <p>Question nr. {{i  1}}</p>
    <div [ngSwitch]="1">
      <app-check-box *ngSwitchCase="0"></app-check-box>
      <app-squares *ngSwitchCase="1" value="getAnswerValue"></app-squares>
      <app-data-picker *ngSwitchCase="2"></app-data-picker>
      <app-selector *ngSwitchDefault></app-selector>
    </div>
  </mat-expansion-panel>
</mat-accordion>