循环数据并仅显示 Angular 中的最后一组项目

Question

我从 API 获取带有名称和 ID 的类别列表，然后在这个类别列表中我从第二个 ID 整合讲座列表。每个类别的讲座列表必须不同（基于 ID）

在我的 console.log() 中它工作正常，但在前端我以某种方式覆盖了 allLectures 数组，这就是为什么在前端我只显示最后一类的讲座的原因。

每个类别的讲座必须不同。

打字稿代码：

  ngOnInit(): void {
      this.getCategories();   
  }


  getCategories() {
    this.categoryListSubs = this.categoryService
      .getAllCategories(this.limit, this.offset)
      .subscribe((categories: any) => {
        this.allDataFromApi = categories;
        this.categoryList = categories.results;
        this.isLoaded = true;

          this.categoryList.forEach((el: any) => {
          this.categoryID = el.id;
          this.getLectures(this.categoryID);
        });
      });
  }

  getLectures(id: any): void {
    console.log(id);

    this.isLoaded = false;

    this.allLecturesOfCategorySubs = this.categoryService
      .getLecturesOfCategory(id, this.limit, this.offset, this.queryParams.sort)
      .subscribe((allLectures: AllLecture) => {
        this.allLectures = allLectures.results;
        console.log(this.allLectures);

        this.isLoaded = true;
      });
  }
}

HTML代码：

<div class="container mb-3 pt-5">
  <div class="categories" *ngFor="let category of categoryList">
    <div class="">
      <div class="d-flex mt-4 category-button py-1">
        <h2>
          {{ category.name }} <span>({{ category.lectures }})</span>
        </h2>
        <a
          class="btn rounded-full"
          [routerLink]="['/all-lectures']"
          [queryParams]="{ page: '1', sort: 'popularity' }"
        >
          All lectures <fa-icon [icon]="faArrowRight"></fa-icon>
        </a>
      </div>
      <div class="videos">
        <div class="grid-4">
          <div *ngFor="let lecture of allLectures">
            <app-video-item
              [latestLecturesList]="lecture"
            ></app-video-item>
          </div>
        </div>
      </div>
    </div>
  </div>

感谢所有愿意提供帮助的人。

Answer 1

您对每个 categoryID 调用 getLectures，然后在 getLectures 中用 this.allLectures = allLectures.results; 覆盖结果。

尝试将其修改为 this.allLectures.push(...allLectures.results);。

Answer 2

这是您管理 allLectures 变量的方式的问题。将其转换为地图或对象以存储 id 到 result 的映射，或者连接到现有的 allLectures，这样它就不会用新的 [= 覆盖以前的结果21=]调用数据。

// In your component, declare these variables:

allLecturesMap = new Map();

ngOnInit(): void {
      this.getCategories();   
  }


  getCategories() {
    this.categoryListSubs = this.categoryService
      .getAllCategories(this.limit, this.offset)
      .subscribe((categories: any) => {
        this.allDataFromApi = categories;
        this.categoryList = categories.results;
        this.isLoaded = true;

          this.categoryList.forEach((el: any) => {
          this.categoryID = el.id;
          this.getLectures(this.categoryID);
        });
      });
  }

  getLectures(id: any): void {
    console.log(id);

    this.isLoaded = false;

    this.allLecturesOfCategorySubs = this.categoryService
      .getLecturesOfCategory(id, this.limit, this.offset, this.queryParams.sort)
      .subscribe((allLectures: AllLecture) => {
        // either use a map
        this.allLecturesMap.set(id, allLectures.results);
        // or concatenate 
        this.allLectures = [...(this.allLectures ?? []), ...allLectures.results]; // assuming its array
        console.log(this.allLectures);

        this.isLoaded = true;
      });
  }
}

如果您选择使用 Map 或 Object，则需要更改 HTML 代码以对其进行迭代。

// considering Map
<div *ngFor="let item of allLecturesMap.entries()">
    <ng-container *ngFor"let lecture of item[1]"> 
     <app-video-item
         [latestLecturesList]="lecture"
     ></app-video-item>
    </ng-container>

</div>

循环数据并仅显示 Angular 中的最后一组项目

Looping through data and displaying only last set of items in Angular

angular