ngFor Angular not showing array object sub object-CodePudding

So I've got a Array of Object.

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

So as the data shown above this objModuleLevel: (2) [{…}, {…}] and this userId: "fc3114ee-ef6a-442d-bec1-bff9fdfec2d1" gets added on the above here is the typescript page.

          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();

Here is my HTML page.

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

Even though I've used this.ref.detectChanges(); it shows data on *ngFor but does not show added data as objModuleLevel and userId.

CodePudding user response：

Note that Even if you use the ChangeDetectorRef there is no change to be detected if you don't change the reference of the array used within the ngFor.

You could try change this line:

this.moduleList = levelData.moduleList;

for this one:

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

CodePudding user response：

Have you tried to use pipe async on *ngFor? But you need to change the type data of moduleList to become observable.

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