Сравнение указанных c свойств различных массивов в NgFor

Question

Я пробовал это в течение нескольких часов и не могу понять, как сравнивать строки в разных объектах.

В основном я получаю ввод в виде объекта (упражнениеForm), и я хочу сравнить его значение со значением свойстваerc.question.answer. После этого мне нужно отобразить div, основываясь на правильности ответа, используя логическое значение.

Я могу делать все это легко в жестко запрограммированных формах, но когда это в ng, я борюсь. Один из подходов, который я попробовал, состоит в том, чтобы создать массив ответов и сравнить его с массивом входных данных, но мой уровень навыка javascript мешает мне.

template:

<section class="exercises">
  <form
    fxLayout="column"
    fxLayoutGap="2px"
    [formGroup]="exerciseForm"
    (ngSubmit)="onSubmit(exerciseForm.value)"
  >

    <ul *ngFor="let exercise of exercises">
      <li>{{ exercise.instruction }}</li>
      <ul *ngFor="let question of exercise.questions">
        <li>
         {{ question.prefix }}
          <mat-form-field>
            <input
              name="answer"
              type="text"
              id="answer"
              matInput
              [formControlName]="question.id">
          </mat-form-field>

          {{ question.sufix }} -
          {{ question.translation }}
        </li>
      </ul>
    </ul>
    <button type="submit" mat-raised-button color="primary">Submit</button>
  </form>
</section>

.ts

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Question } from "./question.model";
import { Exercise } from './exercise.model';
import { TestAnswer } from './testanswer.model';


@Component({
  selector: 'app-exercisetests',
  templateUrl: './exercisetests.component.html',
  styleUrls: [ './exercisetests.component.scss' ]
})
export class ExerciseTestsComponent implements OnInit {
  exerciseForm: FormGroup;

  exercises: Exercise[]=[
    new Exercise (
      'Answer this question',
      [new Question (1, 'Eu','maluco','I am crazy','sou'),
       new Question (2, 'Eu','doidinho','I am cuckoo','estou')],
    )]

  constructor(private fb: FormBuilder) { }



  ngOnInit(): void {
    this.createGroup()

  }

   getAnswersArray() {

  }

  createGroup() {
    this.exerciseForm = this.fb.group({})
    this.exercises[0].questions.forEach(control =>
    this.exerciseForm.addControl(control.id.toString(), this.fb.control('')))
  }

  onSubmit(answer: TestAnswer) { 
    console.log (this.exercises)
    let answers = []
    let answersInput=[]
    this.exercises[0].questions.forEach(pergunta=> {
      answers.push(pergunta.answer)
      console.log(answers)
      return answers
    })

console.log (this.exerciseForm.value)

стекаблитц: https://stackblitz.com/edit/angular-dzzzql

Answer 1

Для сравнения указанных c свойств двух объектов вы можете сделать что-то вроде этого:

const firstObject = {
    property1: "answer1",
    property2: "answer2",
    property3: "answer3"
};

const correctAnswers = {
    property1: "answer1",
    property2: "answer2",
    property3: "answer3"
 };


 const everythingIsRight = Object.keys(firstObject)
     .every(key => firstObject[key] === correctAnswers[key]); //true