如何在角度4的加载时操纵数据

Question

在本节中，我尝试将所有主题类别标题动态地作为'li'标签。在我尝试之后获取与每个类别相关的所有主题，这导致所有主题被加载。但我的要求是当页面加载时它应该只加载第一个主题类别主题而不是全部。但是所有主题类别都需要加载为“li”标签。附加图像供您参考。     output image

home.component.ts

{
     ngOnInit() {

        this._httpService.SubjectPackagesAggregateDetails().map((res: Response) => res.json()).subscribe(
          (success) => {

            if (success.webServiceRequestStatus == 'SUCCESS') {
              this.subjectsAggregateDetailsPack = success.response;
            }
            else {
              this.notificationBarService.create({ message: 'Error in getting subjects Aggregate Details', type: NotificationType.Error });
            }
          },
          (error) => {
            this.notificationBarService.create({ message: 'Not able to get Aggregate Details.', type: NotificationType.Error });
          });

        var GlobalVarAll = this;
        GlobalVarAll.imageShown = true;
        this._httpService.PopularCategoriesSubjects().map((res: Response) => res.json()).subscribe(
          (success) => {
            GlobalVarAll.imageShown = false;
            if (success.webServiceRequestStatus == 'SUCCESS') {
              GlobalVarAll.allSubjectsJson = [];
              GlobalVarAll.allSubjectsJsonCatTitle = [];
              GlobalVarAll.allSubjectsJsonCatAssmntsDelivered = [];
              var allCategoryDataArray = success.response.CategoryData;
              var i=0;
              for (let CategorySubjectsArr of allCategoryDataArray) {
                let catTitle = i++; // as we are unable to add string i.e. category_title so using integer.
                if(typeof GlobalVarAll.allSubjectsJson[catTitle] == 'undefined'){
                    GlobalVarAll.allSubjectsJson[catTitle] = [];
                    GlobalVarAll.allSubjectsJsonCatTitle[catTitle] = CategorySubjectsArr.CategoryTitle;
                    GlobalVarAll.allSubjectsJsonCatAssmntsDelivered[catTitle] = CategorySubjectsArr.CategoryAssessmentsDelivered;
                }
                  for (let allSubjectArr of CategorySubjectsArr.CategorySubjects) {
                    for (let allSubjectVariantDetails of allSubjectArr.SubjectVariants) {
                      GlobalVarAll.allSubjectsJson[catTitle].push({ 
                        "CategoryTitle": CategorySubjectsArr.CategoryTitle, 
                        "VariantId": allSubjectVariantDetails.VariantId, 
                        "DifficultyLevel": allSubjectVariantDetails.DifficultyLevel, 
                        "Duration": allSubjectVariantDetails.Duration, 
                        "SubjectId": allSubjectArr.SubjectId, 
                        "SubjectTitle": allSubjectArr.SubjectTitle, 
                        "SubjectImagePath": allSubjectArr.SubjectImagePath, 
                        "SubjectEntryLevel": allSubjectArr.SubjectEntryLevel, 
                        "SubjectPurchasedMembersCount": allSubjectVariantDetails.PurchasedByMembers 
                      });                  
                    }                
                  }  

              }
            }
            else {
              this.notificationBarService.create({ message: 'Error in getting all subjects', type: NotificationType.Error });
            }
          },
          (error) => {
            this.notificationBarService.create({ message: 'Not able to get all Subjects.', type: NotificationType.Error });
          });

      }

}