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' 上&nbsp;<td&nbsp;*ngFor="let&nbsp;cr&nbsp;of&nbsp;acl.availableApplicationRoles"&nbsp;[hidden]="cr.id&nbsp;==&nbsp;'0'">虽然它确实隐藏但它仍然创建 td 元素并且语句将执行，但您会收到以下错误：&nbsp;[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">&nbsp; <td>&nbsp; &nbsp; <span>{{pr?.name}}</span>&nbsp; </td>&nbsp; <td *ngFor="let cr of acl?.availableApplicationRoles" [hidden]="cr?.id == '0'">&nbsp; &nbsp; <input&nbsp;&nbsp; &nbsp; &nbsp; attr.data-role-id="{{cr?.id}}"&nbsp; &nbsp; &nbsp; attr.data-permission-name="{{pr?.name}}"&nbsp; &nbsp; &nbsp; attr.data-system-name="{{pr?.systemName}}"&nbsp; &nbsp; &nbsp; [checked]="acl.allowed[pr?.systemName][cr.id]"&nbsp; &nbsp; &nbsp; class="allow allow_{{cr?.id}}"&nbsp; &nbsp; &nbsp; type="checkbox" />&nbsp; </td></tr>

Answer 3

好的，所以我终于能够使用以下代码使其工作。<tr *ngFor="let pr of acl.availablePermissions let i = index"><td scope="col">&nbsp; &nbsp; <span>{{pr.name}}</span></td><td *ngFor="let cb of aclPermissions[i].cb">&nbsp; &nbsp; <input attr.data-role-id="{{cb?.roleId}}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attr.data-permission-name="{{pr?.permissionName}}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attr.data-system-name="{{cb?.systemName}}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;class="allow allow_{{cb?.roleId}}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[checked]="cb?.isChecked" /></td>如您所见，我正在使用 now 索引，这有助于我循环到对象数组。