Angular 6：无法读取未定义的属性答案

【问题标题】：Angular 6 : Cannot read property of undefinedAngular 6：无法读取未定义的属性
【发布时间】：2019-04-23 04:10:32
【问题描述】：

我是 angular 新手。目前我正在开发一个使用 angular 作为前端和 php laravel 作为 api 的项目。我从这样的 api 得到一个结果集

{  
   "status":1,
   "msg":"Success",
   "result":{  
      "current_page":1,
      "data":[  
         {  
            "id":3,
            "name":"Sooraj Account II",
            "email":"sfdsf@sfdf.com",
            "phone":"2134234234",
            "send_on":"17 \/ Apr \/ 2019",
            "listing_heading":"Listing three1",
            "listing_id":2
         }
      ],
      "first_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=1",
      "from":1,
      "last_page":2,
      "last_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=2",
      "next_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=2",
      "path":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker",
      "per_page":1,
      "prev_page_url":null,
      "to":1,
      "total":2
   }
}

我把这个结果集称为这样的角度

<ng-container *ngFor="let brkrleads of result.data">
....
</ng-container>

但是当我使用 result.data 时，我遇到了这个错误

BrokerleadsComponent.html:70 错误类型错误：无法读取属性未定义的“数据”

我不知道为什么会出现这个错误，请任何人帮忙。

【问题讨论】：

你可以试试这个<ng-container *ngIf="result.data" *ngFor="let brkrleads of result.data"> .... </ng-container> 吗？二、尝试console.log(result)。

标签： angular typescript

【解决方案1】：

设置属性result={}，然后将数据设置进去。

我已经创建了stackblitz链接请点击这里StackblitzLink

我希望这会有用。

【讨论】：

【解决方案2】：

你必须在组件类的开头设置属性result={}，然后在你有实际数据时设置它的值

【讨论】：

【解决方案3】：

可能未设置结果值。使用可选运算符

<ng-container *ngFor="let brkrleads of result?.data">

【讨论】：

它是使用这些方式检查对象的好方法

【解决方案4】：

您共享的 JSON 有效负载是一个对象。换句话说，JSON 是一种表示对象的方式。本质上，

{  
   "status":1,
   "msg":"Success",
   "result":{  
      "current_page":1,
      "data":[  
         {  
            "id":3,
            "name":"Sooraj Account II",
            "email":"sfdsf@sfdf.com",
            "phone":"2134234234",
            "send_on":"17 \/ Apr \/ 2019",
            "listing_heading":"Listing three1",
            "listing_id":2
         }
      ],
      "first_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=1",
      "from":1,
      "last_page":2,
      "last_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=2",
      "next_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=2",
      "path":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker",
      "per_page":1,
      "prev_page_url":null,
      "to":1,
      "total":2
   }
}

是一个没有名字的对象。或者换一种说法，它没有被分配。它应该分配给一个对象，以便它可以在其他地方引用。也就是说，

var response = {  
   "status":1,
   "msg":"Success",
   "result":{  
      "current_page":1,
      "data":[  
         {  
            "id":3,
            "name":"Sooraj Account II",
            "email":"sfdsf@sfdf.com",
            "phone":"2134234234",
            "send_on":"17 \/ Apr \/ 2019",
            "listing_heading":"Listing three1",
            "listing_id":2
         }
      ],
      "first_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=1",
      "from":1,
      "last_page":2,
      "last_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=2",
      "next_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=2",
      "path":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker",
      "per_page":1,
      "prev_page_url":null,
      "to":1,
      "total":2
   }
}

现在，这可以按照您打算使用的方式在组件模板中使用。例如，我们可以这样做

<ng-container *ngFor="let brkrleads of response.result.data">
....
</ng-container>

希望对您有所帮助。

【讨论】：

【解决方案5】：

您可以预先将结果变量设置为空：

result={}

或者您可以将ng-container 嵌套在另一个包含ngIf 的元素中：

<div *ngIf="result">
  <ng-container *ngFor="let brkrleads of response.result.data">
    ...
  </ng-container>
</div>

您将无法将*ngIf 放在ng-container 本身上，因为已经有*ngFor 并且一次只允许一个以* 为前缀的属性。

【讨论】：