首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么我的angular代码抛出错误:无法读取未定义的属性?

为什么我的angular代码抛出错误:无法读取未定义的属性?
EN

Stack Overflow用户
提问于 2018-12-22 19:55:49
回答 2查看 141关注 0票数 1

我正在从返回JSON对象的web API获取数据,它返回正常,但当我循环遍历它时,它抛出一个错误,无法读取未定义的'CustomerName‘的属性。

代码语言:javascript
复制
    [System.Web.Http.HttpGet]
    public object GetBookings(string SearchByParam = "", byte WhichRecords 
      = 1)
    {
        List<ZahidCarWash.ViewModels.BookingArrivalCancellationViewModel> 
        lstBookingArrivalCancellation = 
      BookingsRepository.SelectCustomerBookingDetailsAndroid(SearchByParam, 
      WhichRecords);

        if (lstBookingArrivalCancellation.Count > 0)
        {
            return Json(new { ReturnStatusJSON = true, lstArrivalCancellation = lstBookingArrivalCancellation });
        }

        else
        {
            return Json(new { ReturnStatusJSON = false, lstArrivalCancellation = lstBookingArrivalCancellation });
        }
           }

Customer.service.ts

代码语言:javascript
复制
export class CustomerService {
    formData: Customer;
    Data: Customer[];

    constructor(private http: HttpClient) { }

    getData() {
        return
        this.http.get('http://localhost:13924/api/AndroidOperations/GetBookings')
            .subscribe(function(data: any) {
            this.Data = data['lstArrivalCancellation'] as Customer[];
            console.log(this.Data);
        });
    }

}

customer-list.component.ts

代码语言:javascript
复制
export class CustomersListComponent implements OnInit {

    constructor(public service: CustomerService) {
    }

    ngOnInit() {
        this.service.getData();
    }

}

.html

代码语言:javascript
复制
 <table class="table table-hover">
  <tr *ngFor="let d of service.Data | async"></tr>
   <td *ngIf="CustomerName">{{d.CustomerName}}</td>
   <td>Tr</td>
 </table>

客户模式:

代码语言:javascript
复制
   export class Customer {
     CustomerID: number ;
     CustomerName: string;
     ContactNo: string;
     VehicleRegNo: string;
     fk_VehicleMakeID: number;
     VehicleModel: number;

    }
EN

回答 2

Stack Overflow用户

发布于 2018-12-22 20:01:32

尝试将html代码中的ngIf

代码语言:javascript
复制
<td *ngIf="CustomerName">{{d.CustomerName}}</td>

代码语言:javascript
复制
<td *ngIf="d">{{d?.CustomerName}}</td>
票数 0
EN

Stack Overflow用户

发布于 2018-12-23 01:44:04

您在应该检查d.CustomerName的*ngIf语句中检查CustomerName。D‘会一直存在,因为你要遍历它所在的集合。但是d.CustomerName是未定义的,它是rails。

代码语言:javascript
复制
<div *ngIf="d.CustomerName">{{d.CustomerName}}</div

应该能行得通。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53895430

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档