Uncaught Error: Template parse errors: Can’t bind to 'users' Since it isn’t a known Property of 'app-user'

Asked

Viewed 285 times

0

I am trying to consume data from a test api based on Laravel, but am getting the following error:

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>

Someone knew how to help me in this situation, I’m starting at Angular.

angular typescript
  • 1

    in the user module, your user service import looks different. This line here is correct? import { Userservices } from './userServices';

  • It was not that...unfortunately the error remains the same

  • 1

    Usually this is because you are using some <app-users [users]="users" ></app-users> But in your case I don’t see why it would give this error. When you access users?

  • 2

    Tries to initialize the user users: User[] = [] - I don’t think so, but let’s try...

1 answer

1


Man , to make the data-bind you need to add the @Input developer to the user.component.ts file before the user variable, and also import from the angular/core, so the angular understands that it is an input variable.

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

   @Input() user:User

Browser other questions tagged angular typescript

You are not signed in. Login or sign up in order to post.