Angular - TypeError：无法读取未定义的属性“0”

Question

我有一个从 api 返回的 json 对象，这是一个示例。{  "availablePermissions": [    {      "id": 25,      "name": "Dashboard Access",      "systemName": "DashboardAccess"    }, {      "id": 32,      "name": "Claims Access",      "systemName": "ClaimsAccess"    }, {      "id": 34,      "name": "Purchasing Reports Access",      "systemName": "PurchasingReportsAccess"    }  ],  "availableApplicationRoles": [    {      "id": "6a8d97b8-7fd5-485c-8eff-5869232b7f26",      "roleName": "Billing",      "systemName": null    }, {      "id": "fbb6c213-2b19-4eec-891f-0552e3b14b5b",      "roleName": "Power User",      "systemName": null    }  ],  "allowed": {    "dashboardAccess": {      "144ca9cc-9d56-4cd0-b9b2-c097d606d36e": false,      "fbb6c213-2b19-4eec-891f-0552e3b14b5b": true    },    "claimsAccess": {        "144ca9cc-9d56-4cd0-b9b2-c097d606d36e": false,        "fbb6c213-2b19-4eec-891f-0552e3b14b5b": true    },    "purchasingReportsAccess": {      "144ca9cc-9d56-4cd0-b9b2-c097d606d36e": false,      "fbb6c213-2b19-4eec-891f-0552e3b14b5b": true    }  },  "pager": {    "pageIndex": 0,    "pageSize": 10,    "totalCount": 3,    "totalPages": 1,    "hasPreviousPage": false,    "hasNextPage": false  },  "success": true,  "message": null}现在在 ngOnInit 内的组件中，我有代码将其绑定到名为 acl 的属性，这是代码。var dummyPermission = {  id: "0",  roleName:"Permission",  systemName:null}var self = this;                this.aclData.loadACL(dataTablesParameters, pageInfo)  .subscribe(data => {    if (data.success) {      self.pluginService.lengthMenuAngularDataTable("#ACLTable", dataTablesParameters.length);      self.acl = data;      self.acl.availableApplicationRoles.unshift(dummyPermission);      callback({        recordsTotal: self.acl.pager.totalCount,        recordsFiltered: self.acl.pager.totalCount,        data: []      });      console.log("success load acl table");      self.pluginService.witzThemeLoader(false);      self.pluginService.datePicker();    } 

Answer 1

您将 td 隐藏在 cr.id == '0' 上

 <td *ngFor="let cr of acl.availableApplicationRoles" [hidden]="cr.id == '0'">

虽然它确实隐藏但它仍然创建 td 元素并且语句将执行，但您会收到以下错误：

 [checked]="acl.allowed[pr?.systemName][cr.id]"

因为 cr.id 在这种情况下为 0：

[checked]="acl.allowed[pr?.systemName][0]"

您需要添加条件或将 *ngIf 与容器一起使用。

Answer 2

您可以使用可选链接，这应该可以解决问题

<!-- notice the ? after acl and cr -->

<td *ngFor="let cr of acl?.availableApplicationRoles" [hidden]="cr?.id == '0'">

基本上发生的事情是角度试图在您的数据返回之前呈现您的列表，因此它不断循环并抛出错误。如果您放置?afteracl角度将跳过*ngFor直到您的数据返回

编辑

您将需要?像这样在所有对 cr 的引用上使用

<tr *ngFor="let pr of acl?.availablePermissions">

  <td>

    <span>{{pr?.name}}</span>

  </td>

  <td *ngFor="let cr of acl?.availableApplicationRoles" [hidden]="cr?.id == '0'">

    <input 

      attr.data-role-id="{{cr?.id}}"

      attr.data-permission-name="{{pr?.name}}"

      attr.data-system-name="{{pr?.systemName}}"

      [checked]="acl.allowed[pr?.systemName][cr.id]"

      class="allow allow_{{cr?.id}}"

      type="checkbox" />

  </td>

</tr>

Answer 3

好的，所以我终于能够使用以下代码使其工作。

<tr *ngFor="let pr of acl.availablePermissions let i = index">

<td scope="col">

    <span>{{pr.name}}</span>

</td>

<td *ngFor="let cb of aclPermissions[i].cb">

    <input attr.data-role-id="{{cb?.roleId}}"

           attr.data-permission-name="{{pr?.permissionName}}"

           attr.data-system-name="{{cb?.systemName}}"

           class="allow allow_{{cb?.roleId}}"

           type="checkbox"

           [checked]="cb?.isChecked" />

</td>

如您所见，我正在使用 now 索引，这有助于我循环到对象数组。