从嵌套数组json angular获取值

Question

我正在尝试从嵌套数组中获取值。一些我无法获得值的原因。

这是我的JSON

                {
        "VersionNum": "",
        "studyLevel": [{
                "countryName": "StudyLevel",
                "FS": "15-JAN-2020",
                "LS": "10-Jan-2020",
                "FI": "08-DEC-2019",
                "LI": "10-FEB-2019",
                "getData": [{
                        "countryId": 0,
                        "userId": "4",
                        "Username": "Vimal",
                        "FI": "12-JAN-2020",
                        "LI": "21-Feb-2020",
                        "experience": 5
                    },
                    {
                        "countryId": 0,
                        "userId": "5",
                        "Username": "Jack",
                        "FI": "12-JAN-2020",
                        "LI": "21-Feb-2020",
                        "experience": 3
                    },
                    {
                        "countryId": 0,
                        "userId": "6",
                        "Username": "James",
                        "FI": "12-JAN-2020",
                        "LI": "21-Feb-2020",
                        "experience": 1
                    }
                ]
            },
            {
                "countryName": "Country 1",
                "FS": "15-JAN-2020",
                "LS": "10-Jan-2020",
                "FI": "08-DEC-2019",
                "LI": "10-FEB-2019",
                "getData": [{
                        "countryId": 0,
                        "userId": "4",
                        "Username": "Paul",
                        "FI": "12-JAN-2020",
                        "LI": "21-Feb-2020",
                        "experience": 5
                    },
                    {
                        "countryId": 0,
                        "userId": "4",
                        "Username": "Smith",
                        "FI": "12-JAN-2020",
                        "LI": "21-Feb-2020",
                        "experience": 5
                    },
                    {
                        "countryId": 0,
                        "userId": "4",
                        "Username": "Trumble",
                        "FI": "12-JAN-2020",
                        "LI": "21-Feb-2020",
                        "experience": 5
                    }
                ]
            }
        ]
    }

我正在尝试从getData访问用户名。这是我的ts代码

const getUserData = this.dataService.getuserList().subscribe((data:any) => {
  console.log(data);
  this.reponsearray = data;   
  this.responseuserName = data.getData[0].Username;   
});

这是我的HTML

      <ng-container *ngFor="let item of responseuserName ">
           <th  [attr.colspan]="keycount" class="User-names">{{item.userName}}</th>
      </ng-container>

请让我知道我做错了什么。

Answer 1

你可以试着这样做。如您所见，这里我们有一个对象数组studyLevel，里面有另一个对象getData数组，所以我们使用了两个*ngFor循环，一个在另一个内部

TS

const getUserData = this.dataService.getuserList().subscribe((data:any) => {
  console.log(data);
  this.responseuserName = data.studyLevel;   
});

HTML

 <ng-container *ngFor="let item of responseuserName ">
     <ng-container *ngFor="let data of intem. getData >
           <th  [attr.colspan]="keycount" class="User-names">
{{data.userName}}</th>
     </ng-container>
 </ng-container>

Answer 2

studyLevel阵列具有所需的数据：

const getUserData = this.dataService.getuserList().subscribe((data:any) => {
  console.log(data);
  this.reponsearray = data;   
  this.responseuserName = data.studyLevel[0].getData[0].Username;   
});

更新：

您可以创建嵌套的*ngFor

<div *ngFor="let row of response.studyLevel">
  <div *ngFor="let col of row.getData">
    {{col.Username}} {{col.FI}} {{col.LI}}
  </div>
</div>

作为建议，您可以将responseuserName重命名为responseuserNames。

The work stackblitz example can be seen here.