Question

我试图在点击加载后更新Observable数组，但它会导致多次调用API。

这是我的HTML：

<app-productlistother *ngFor="let item  of favs$ | async" [item]="item"></app-productlistother>

<a (click)="loadMore()">Load More</a>

组件：

ngOnInit() {
    this.favs$ = this._favoriteService.getFavorites(this.pageNum);
  }

  private loadMore() {
    this.pageNum = this.pageNum + 1;

    this.favs$ = this.favs$.merge(this._favoriteService.getFavorites(this.pageNum));
  }

服务：

getFavorites(page): Observable<Response> {
    return this._http.get(environment.baseUrl + 'favorite?page=' + page)
      .map((result: Response) => result.json().data);
  }

我该如何解决这个问题？对getFavorites(page)的每个新请求，我需要在数组底部推送新结果...

Answer 1

@Injectable()
export class MyBooleanService {
    myBool$: Observable<any>;

    private boolSubject: Subject<any>;

    constructor() {
        this.boolSubject = new Subject<any>();
        this.myBool$ = this.boolSubject.asObservable();
    }

    ...some code that emits new values using this.boolSubject...
}

然后在你的组件中你会有这样的东西：

@Component({...})
export class MyComponent {
    currentBool: any;

    constructor(service: MyBooleanService) {
        service.myBool$.subscribe((newBool: any) => { this.currentBool = newBool; });
    }
}

现在，根据您需要对该值执行的操作，您可能需要在组件中进行更新以进行更新，但这是使用可观察值的要点

另一种选择是在模板中使用异步管道，而不是在构造函数中显式订阅流。但同样，这取决于您对bool值的具体要求。

Answer 2

所以你没有HTML，而<app-productionother>模板只是{{item.name}}？在这种情况下，为什么不这样构造它：

<ng-template *ngFor="let item of favs$ | async"> 
    <app-productlistother [item]="item"></app-productlistother> 
</ng-template>

这使异步管道保持在重复元素之外，因此异步管道不会在每次迭代的项目上重复。我认为这就是为什么它被多次调用（可能与你有物品的号码相同）。

此外，如果merge没有成功，请尝试concat。 Concat将等待第一个observable完成发射，然后将加入第二个observable。合并并不等待第一个观察者完成。我想你是否希望你的数据按顺序加载，如果你点击加载更多而没有与第二批交织的初始数据，或者等等。

如何在加载时更新可观察数组

2 个答案: