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>