类型打字稿上不存在该属性

时间:2020-06-11 15:32:26

标签: angular

编译应用程序时出现以下错误类型:

rc / app / admin / users / users.component.html:22:27-错误TS2339:属性 'UsersComponent'类型上不存在'getUsers'。

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

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

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

组件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;
          }
    
    }

1 个答案:

答案 0 :(得分:1)

您需要在getUsers()文件中创建usercomponent.ts

是否需要将getUser()运行到ngOnInit()中?然后尝试如下,

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;
  }
}

由于未在正确的.ts文件中定义getUser()而导致的由您引起的错误