0

Estou tentando consumir os dados de uma api teste baseada em Laravel, mas estou obtendo o seguinte erro:

Can't bind to 'users' since it isn't a known property of 'app-user'.

USERCOMPONENT

import { Component, OnInit, Input } from '@angular/core';
import { User} from './user';
import { UserService } from './user.service';
@Component({
selector: 'app-user',
   templateUrl: './user.component.html',
   styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
   users: User[]
constructor(private userService: UserService) {
}
ngOnInit() {
   this.listarUsuarios();
}
   listarUsuarios(): void{
   this.userService.listaUsararios().subscribe(users => this.users = users);
}
}

USERSERVICE

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { User } from "./user";
const API = 'http://localhost:8000/api/user/users';
@Injectable({ providedIn: 'root' })
   export class UserService {
   constructor(private http: HttpClient) {
   }

   listaUsararios(): Observable<User[]> {
      return this.http.get<User[]>(API);
   }
}

USERMODULE

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule} from '@angular/common/http';


import { UserComponent} from './user.component';
import { UserServices } from './user.services';

@NgModule({
  declarations: [
    UserComponent,
  ],
  imports: [
    CommonModule,
    HttpClientModule

  ],
  exports:[
    UserComponent,
  ],

  providers:[ 
   UserServices
  ]
})

export class UserModule { }


USERINTERFACE

export interface User {
   id: number,
   name:string,
   email: string,
   telefone:string
   datascimento: Date,
}

APP.COMPONENT.HTML

<app-home></app-home>
<app-user></app-user>

Alguém sabia me ajudar nessa situação, estou iniciando no Angular.

4
  • 1
    no user module, seu import do user service parece estar diferente. Essa linha aqui está correta? import { UserServices } from './userServices';
    – brenodiogo
    Commented 9/09/2019 às 2:31
  • Não era isso...infelizmente o erro permanece o mesmo Commented 9/09/2019 às 16:13
  • 1
    normalmente isso se da porque vc esta usando algum input tipo <app-users [users]="users"></app-users> Mas no seu caso não vejo por que daria esse erro. Em que momento vc acessa o users? Commented 9/09/2019 às 18:58
  • 2
    Tenta inicializar o user users: User[] = [] - Acredito que não seja isso, mas vamos tentar... Commented 9/09/2019 às 19:24

1 Resposta 1

1

Man , pra fazer o data-bind precisa adicionar o decorator @Input no arquivo user.component.ts antes da variável user, e também importar do angular/core, assim o angular entende que é uma variável de entrada.

   import { Input } from '@angular/core'
   import { User } from 'user-interface'

   @Input() user:User

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 .