Angular - 類型錯誤：無法讀取未定義的屬性“0”

Question

我有一個 json object，我從 api 回來，這是一個樣本。

{
  "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();
    } else {
      self.pluginService.notificationPopup(null, "danger");
      self.pluginService.witzThemeLoader(false);
      self.pluginService.datePicker();
      console.log("error");
    }
  });

現在在我的 html 中，我嘗試在表格中呈現它們，所以這里是引發錯誤的行的代碼。

<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>

現在，當 angular 在獲取數據后嘗試渲染頁面時，似乎 go 進入一個循環，在控制台中每秒都會出現以下錯誤。

ERROR TypeError: Cannot read property '0' of undefined
    at Object.eval [as updateRenderer] (ACLComponent.html:85)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
    at checkAndUpdateView (core.js:13849)
    at callViewAction (core.js:14195)
    at execEmbeddedViewsAction (core.js:14153)
    at checkAndUpdateView (core.js:13845)
    at callViewAction (core.js:14195)
    at execEmbeddedViewsAction (core.js:14153)
    at checkAndUpdateView (core.js:13845)
    at callViewAction (core.js:14195)

現在第 85 行是我在上面提供的 html，即這一行。

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

我只是不知道出了什么問題，我查看了數據，它們似乎都很好，我只是不知道為什么會這樣，誰能解釋一下？

#

更新

經過一些調試，我能夠找到問題的根源，就是這樣。

在我共享的 api 響應數據 object 中，有一個 object 稱為“允許”，這是格式。

 "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 }

}

現在在 html 里面我有這條線。

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

現在這需要從上面允許的 object 和與 systemName 匹配的 object 中過濾，然后過濾出與 id 匹配的 object，問題是，它不是數組，所以返回未定義。

我還不確定我如何處理這樣的 object，任何幫助將不勝感激。

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'">

基本上正在發生的事情是 angular 試圖在您的數據返回之前呈現您的列表，因此它不斷循環並拋出錯誤。 如果你把? 在acl angular 之后將跳過*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 索引，這有助於我循環到對象數組。

感謝大家的幫助。