-1

esse erro deve ser simples mas eu sou novo com angular

acredito que devo fazer poucas mudanças nesse codigo

Codigo do Serviço abaixo:

import { Grade } from './../calculator/calculator.model';
import { Injectable } from '@angular/core';
import { Input } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ResultService {
  @Input()
  grade: Grade = {
    name: '',
    grade1: null,
    grade2: null,
    grade3: null,
  };

  calcGrade(): void {
    let nota1 = this.grade.grade1 * 0.25;
    let nota2 = this.grade.grade2 * 0.25;
    let nota3 = this.grade.grade3 * 0.5;

    let conta = nota1 + nota2 + nota3;

    if (conta < 6.2) {
      console.log(
        `o aluno ${this.grade.name} foi reprovado com a nota ${conta}`
      );
    }
    if (conta >= 6.2) {
      console.log(
        `o aluno ${this.grade.name} foi aprovado com a nota ${conta}`
      );
    }
  }

  constructor() {}
}

quando clico em um botao quero chamar outro componente com os dados digitados em outro componente

Codigo HTML abaixo:

ou eu posso colocar o codigo do service dentro do ts component

<div class="container">
  <div class="content">
    <h1>
      o aluno {{ grade.name }} tirou {{ grade.grade1 }} na primeira prova e
      {{ grade.grade2 }} na segunda prova
    </h1>
  </div>
</div>

1 Resposta 1

0

Sugiro que trabalhe tudo num mesmo componente, GradeCalculatorComponent por exemplo. O importante é que no serviço você tá usando @Input(), o que não é uma sintaxe usada pelo Angular (usada apenas para componentes!).

Proponho algo do tipo (após gerar o componente com $ ng g c grade-calculator):

@Component({
...
});
export class GradeCalculatorComponent {
 grade: Grade = {
  name: '',
  grade1: null,
  grade2: null,
  grade3: null,
 };
 submitted = false;

 calcGrade(): void {
  this.submitted = true;
  ...
 }
}

grade-calculator.component.ts

<input [(ngModel)]="grade.name" type="text" placeholder="Name">
<input [(ngModel)]="grade.grade1" type="number" placeholder="Grade 1" min="0" max="10">
<input [(ngModel)]="grade.grade2" type="number" placeholder="Grade 2" min="0" max="10">
<input [(ngModel)]="grade.grade3" type="number" placeholder="Grade 3" min="0" max="10">
<button type="button" (click)="calcGrade()"></button>

<h1 *ngIf="submitted">
  o aluno {{ grade.name }} tirou {{ grade.grade1 }} na primeira prova e
  {{ grade.grade2 }} na segunda prova
</h1>

grade-calculator.component.html

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .