CODEWITHSUNDEEP
angular
lipudalai
lipudalai

Reputation: 31

property doesnot exist on type typescript

I'm getting following type of error when I compile my application:

rc/app/admin/users/users.component.html:22:27 - error TS2339: Property 'getUsers ' does not exist on type 'UsersComponent'.

22 <button (click)="getUsers()" mat-button-sucess>Display Userc</button>

src/app/admin/users/users.component.ts:7:16

7 templateUrl: './users.component.html',

Error occurs in the template of component UsersComponent.

Usercomponent.html

    <h1>Users Admin</h1>
    <div class="container row">
        <div   class="col-md-6">
        <table class="table">
          <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th></th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let user of users" >
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td><button type="button" (click)="getUsers()" class="btn btn-sucess">Show Details</button></td>
          </tr>
          </tbody>
        </table>
      </div>
      <div   class="col-md-6">
             <button (click)="getUsers()" mat-button-sucess>Display Userc</button>
      </div>
    </div>

httpclientservice.ts

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { User } from '../model/User';
    
    @Injectable({
      providedIn: 'root'
    })
    export class HttpclientService {
    
      constructor(private httpClient:HttpClient) { }
    
      getUsers()
         {
              return this.httpClient.get<User[]>('http://localhost:8080/users');
          }
    }

usercomponent.ts

    import { Component, OnInit } from '@angular/core';
    import { User } from '../../model/User';
    import { HttpclientService } from '../../service/httpclient.service';
    
    @Component({
      selector: 'app-users',
      templateUrl: './users.component.html',
      styleUrls: ['./users.component.css']
    })
    export class UsersComponent implements OnInit {
         users: Array<User>
    
      constructor(private httpclientService: HttpclientService) { }
    
      ngOnInit() {
          this.httpclientService.getUsers().subscribe(
                  response => this.handleSuccessfulResponse(response),
                );
      }
      handleSuccessfulResponse(response) {
            this.users = response;
          }
    
    }

Upvotes: 0

Views: 2269

Answers (1)

Tharindu Lakshan
Tharindu Lakshan

Reputation: 6116

You need to create getUsers() in usercomponent.ts file.

If you need to run getUser() into ngOnInit() ? then try as follows,

import { Component, OnInit } from "@angular/core";
import { User } from "../../model/User";
import { HttpclientService } from "../../service/httpclient.service";

@Component({
  selector: "app-users",
  templateUrl: "./users.component.html",
  styleUrls: ["./users.component.css"]
})
export class UsersComponent implements OnInit {
  users: Array<User>;

  constructor(private httpclientService: HttpclientService) {}

  ngOnInit() {
    this.getUsers();
  }

  getUser() {
    this.httpclientService
      .getUsers()
      .subscribe(response => this.handleSuccessfulResponse(response));
  }
  handleSuccessfulResponse(response) {
    this.users = response;
  }
}

this error caused due to you are not defined getUser() in the proper .ts file

Upvotes: 1

Related Questions