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

问题描述 投票:0回答:1

我正在努力弄清楚我的代码有什么问题。我正在尝试从我的角度代码中调用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>

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

angular typescript
1个回答
1
投票

没问题,您自己放轻松,您忘了让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>
© www.soinside.com 2019 - 2024. All rights reserved.