ngFor Angular 不顯示數組對象子對象

Question

所以我有一個對象數組。

0:
createdBy: null
createdDate: "2022-06-12T11:35:15.087"
description: null
moduleId: "b60d4fd5-7052-40e3-8abe-0f45ce1fc71e"
moduleName: "Factoring"
sectionId: "f17942f4-770f-42ea-bc3e-225bf15710ea"
updatedBy: null
updatedDate: null
1:
createdBy: null
createdDate: "2022-06-12T11:35:15.087"
description: null
moduleId: "0649f5db-8c9f-4641-8798-a0c9313e9824"
moduleName: "Location"
objModuleLevel: (2) [{…}, {…}] <-- this object is shown on console log
sectionId: "f17942f4-770f-42ea-bc3e-225bf15710ea"
updatedBy: null
updatedDate: null
userId: "fc3114ee-ef6a-442d-bec1-bff9fdfec2d1" <-- this id is also shown on console log

因此，正如上面顯示的數據，這個objModuleLevel: (2) [{…}, {…}]和這個userId: "fc3114ee-ef6a-442d-bec1-bff9fdfec2d1"被添加到上面這里是打字稿頁面。

          if (gP.filter(mo => mo.type === 'M')?.length > 0){
            levelData.moduleList.forEach(mL => {
              gP.filter(mo => mo.type === 'M').find((val, index) => {
                if (val.levelId === mL.moduleId) {
                  mL.objModuleLevel = val.objLevel;
                  mL.userId = val.userId;
                  return true;
                }
              });
            });
          }
          else {
            levelData.moduleList.forEach(mL => {
              mL.isTrue = false;
              mL.userId = this.editUserId;
            });
          }
        });
        
        this.moduleList = levelData.moduleList;
        this.subscriptions.push(getPermissionLevelPerUser);
        console.log(this.moduleList); <-- above complete data can be seen in this with objModuleLevel and userId
        this.ref.detectChanges();

這是我的 HTML 頁面。

<tr align="center" *ngFor="let module of moduleList ; let RowIndex = index;">
  <td>{{module.moduleName}}</td>
  <td>{{module.objModuleLevel}}</td> <-- this does not show as it is undefined
  <td>{{module.userId}}</td> <-- this does not show as it is undefined
</tr>

即使我使用this.ref.detectChanges(); 它在*ngFor上顯示數據，但不會將添加的數據顯示為objModuleLevel和userId 。

Answer 1

我偶然發現的解決方案是這個。

if (gP.filter(mo => mo.type === 'M')?.length > 0){
            levelData.moduleList.forEach(mL => {
              gP.filter(mo => mo.type === 'M').find((val, index) => {
                if (val.levelId === mL.moduleId) {
                  mL.objModuleLevel = val.objLevel;
                  mL.userId = val.userId;
                  this.ref.detectChanges(); <-- this would bind data on page
                  return true;
                }
              });
            });
          }
          else {
            levelData.moduleList.forEach(mL => {
              mL.isTrue = false;
              mL.userId = this.editUserId;
            });
          }
        });
        
        this.moduleList = levelData.moduleList;
        this.subscriptions.push(getPermissionLevelPerUser);
        console.log(this.moduleList); <-- above complete data can be seen in this with objModuleLevel and userId
        this.ref.detectChanges(); <-- this will not bind data on page load at first

正如你在代碼中看到的那樣，我把this.ref.detectChanges(); 過濾器內部

gP.filter(mo => mo.type === 'M').find((val, index) => {
                    if (val.levelId === mL.moduleId) {
                      mL.objModuleLevel = val.objLevel;
                      mL.userId = val.userId;
                      this.ref.detectChanges(); <-- this would bind data on page
                      return true;
                    }
                  });

我並不真正理解在具有過濾器的循環內綁定的行為很容易工作，而不是在有時有效但有時不工作的循環外綁定。

Answer 2

請注意，即使您使用ChangeDetectorRef ，如果您不更改 ngFor 中使用的數組的引用，也不會檢測到任何更改。

您可以嘗試更改此行：

this.moduleList = levelData.moduleList;

對於這個：

this.moduleList = [...levelData.moduleList];

Answer 3

您是否嘗試過在 *ngFor 上使用管道異步？ 但是您需要更改 moduleList 的類型數據以變得可觀察。

<tr align="center" *ngFor="let module of moduleList | async ; let RowIndex = index;">
  <td>{{module.moduleName}}</td>
  <td>{{module.objModuleLevel}}</td>
  <td>{{module.userId}}</td>
</tr>