从角度调用API“导致未定义”

时间:2019-10-22 04:30:17

标签: angular typescript

我努力找出原因,我的代码出了什么问题。我试图从我的棱角代码中调用rest API,但是它导致“ TypeError:无法读取未定义的属性'id'”

我的 clients.ervice.ts 代码如下:

import { Injectable } from '@angular/core';
import { Clients } from './clients.model';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable} from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class ClientsService {

  clientsUrl="http://localhost:21063/api/clints

  constructor(private http:HttpClient) { }
getAllClients():Observable<Clients[]>{
    return this.http.get<Clients[]>(this.clientsUrl);

}

我在 client.component.ts

中的代码
 constructor(private formBuilder: FormBuilder, private Service: ClientsService) { }
  clients:Clients[];
  ngOnInit() {

this.Service.getAllClients()
      .subscribe(data => this.clients=data);

这是 model.ts

export class Clients {
    id:number;
    name:string;
    phone:string;
    address:string;
    type:string;
    account:number;
    nots:string;
    branchId:number;
}

最后我的庙宇:

                  <tbody>
                        <tr *ngFor="let item of clients"></tr>
                        <td>{{item.id}} </td>
                        <td>{{item.name}} </td>
                        <td>{{item.phone}} </td>
                        <td>{{item.address}} </td>
                        <td>{{item.account}} </td>
                        <td>{{item.nots}} </td>

                    </tbody>

预先感谢您提供任何解决和了解此问题的帮助

1 个答案:

答案 0 :(得分:3)

没问题,您自己就容易了,您忘了让tr元素包装所有td元素

<tbody>
  <tr *ngFor="let item of clients">
      <td>{{item.id}} </td>
      <td>{{item.name}} </td>
      <td>{{item.phone}} </td>
      <td>{{item.address}} </td>
      <td>{{item.account}} </td>
      <td>{{item.nots}} </td>
  </tr>
</tbody>