0

Estoy comenzando en esto de implementar el backend con el frontend, tengo un error debe ser simple y no lo veo, este es mi código...

Este seria mi componente que quiero mostrar en mi servidor local: Ahi indico donde me subraya el error, y al pasar el mouse por encima, me dice: Identifier 'Reclamos' is not defined. The component declaration, template variable declarations, and element references do not contain such a member.

Y no me facilita el Quick fix.

<ul>
    <li *ngFor="let r of Reclamos"> <--------(MI ERROR SE MUESTRA AHI EN LA PALABRA Reclamos)
        <span>{{r.num_reclamo}}, {{r.tipo_problema}}, {{r.fecha}}</span>
    </li>
</ul>

Este es mi models de los atributos:

export interface Reclamos {
num_reclamo: number;
rut_usuario: number;
tipo_problema: string;
fecha: string;
texto_reclamo: string;
estado: string;
SLA_reclamo: number;
fecha_tope: string;
}

Este es mi codigo en la parte del component.ts

import { Component, OnInit } from '@angular/core';
import { ReclamosService } from 'src/app/services/reclamos-service.service';
import { Reclamos } from 'src/models/Reclamos';

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

reclamos: Reclamos[];

constructor(private reclamosService: ReclamosService) { }

ngOnInit(){
this.obtenerReclamos();
}
obtenerReclamos() {
this.reclamosService.obtenerReclamos().subscribe(reclamos => this.reclamos = reclamos); 
}
}

Este seria mi servicio.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Reclamos } from 'src/models/Reclamos';

@Injectable({
providedIn: 'root'
})
export class ReclamosService {


private URL = 'localhost:8080/api'

constructor(private http: HttpClient) { }


obtenerReclamos(): Observable<Reclamos[]>{
const suffix = '/reclamos/usuario'
return this.http.get<Reclamos[]>(this.URL+suffix);
}
}

De ante mano agradezco por sus tiempo y respuestas, gracias ;).

2 respuestas 2

0

Creo que el problema puede estar en que tu variable reclamos la estas colocando con el 'r' mayuscula. Prueba colocarlo en minúscula.

<ul>
    <li *ngFor="let r of reclamos">
        <span>{{r.num_reclamo}}, {{r.tipo_problema}}, {{r.fecha}}</span>
    </li>
</ul>
2
  • Magicamente eso sirvio, podrias explicarme por que pasa eso?para que no me vuelva a suceder. Gracias el 6 may. 2020 a las 3:51
  • las propiedades de tu componente son case sensitive, osea que si tu variable se llama reclamos es diferente a Reclamos, porque la mayúscula lo hace distinta. el 6 may. 2020 a las 4:11
0

Aunque mi respuesta es pasada de tiempo, es más bien para que quienes consulten después se vean beneficiados con ella. No es que el problema se haya arreglado por arte de magia. Tu tienes dos elementos, uno llamado reclamos y otro llamado Reclamos:

  • reclamos: es un objeto del tipo Reclamos.
  • Reclamos: es el modelo o tipo, que tú lo definiste como interface o class en algún lugar de tu proyecto, con el que creaste la instancia reclamos.

Cuando escribiste *ngFor="let r of Reclamos" te estabas refiriendo a tu modelo o tipo Reclamos y no a tu objeto reclamos. Tu no puedes extraer datos de Reclamos porque este es sólo un molde, un esquema, una plantilla... o sea, una interface o class, no es un objeto existente. En su lugar debes es ubicar el objeto (reclamos) creado a partir de esa class o interface, el cual sí está cargado de datos, sí existe. Por eso la solución es cambiar Reclamos por reclamos... no fue magia.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.