Question

我是async pipes的新手，我想在自己的应用程序中使用它，而且我也摆脱了.subscribe()的使用，而改为使用.map()。我当前的代码工作正常。但是，当我使用.map而不是subscription然后使用| async时，我会有点卡住。

下面是我当前的代码：如果有人可以提供任何输入，将不胜感激。

//组件

public lhsLinks: Observable<ContactInfoResponse>;
ngOnInit() {
this.getAllLinks();
}
private getAllLinks() {
this.store
.pipe(select(ContactTriageTiles))
.subscribe((contractTiles: any) => {
  const temparray = [];
  const chunksSize = contractTiles.length / 2;
  for (let i = 0, j = contractTiles.length; i < j; i += chunksSize) {
    const elementList = contractTiles.slice(i, i + chunksSize);
    temparray.push(elementList);
  }
  if (temparray.length > 0) {
    this.rhsLinks = temparray[0];
    this.lhsLinks = temparray[1];
  }
});

}

//在我的html中：

<div class="row no-gutters" *ngFor="let contact of lhsLinks">
<h3>{{contact.name}}</h3>
</div>

Answer 1

如果您只需要lhsLinks的输出，则只需从map函数返回该值即可。

public lhsLinks: Observable<ContactInfoResponse>;
ngOnInit() {
this.getAllLinks();
}

private getAllLinks() {
this.lhsLinks = this.store
.pipe(select(ContactTriageTiles))
.map((contractTiles: any) => {
  const temporary = [];
  const chunksSize = contractTiles.length / 2;
  for (let i = 0, j = contractTiles.length; i < j; i += chunksSize) {
    const elementList = contractTiles.slice(i, i + chunksSize);
    temporary.push(elementList);
  }
  if (temporary.length > 0) {
    return temporary[1];
  }
});

<div class="row no-gutters" *ngFor="let contact of lhsLinks|async">
<h3>{{contact.name}}</h3>
</div>

异步管道本身将在您传入的可观察对象上调用订阅。

如果您需要rhsLinks和lhsLinks值，它将变得更加复杂。您可能会看到返回值的对象，然后使用“ async as [property]”来分解模板中的内容。

Answer 2

为什么不只将项目过滤到上半年和下半年？

contractTiles$ = this.store.pipe(select(ContactTriageTiles));

rhsLinks$ = this.contractTiles$.pipe(
  map(
    // Filter to the first half
    contractTiles => contractTiles.filter(
      (item, index) => index < (contractTiles.length / 2)
    )
  )
);

lhsLinks$ = this.contractTiles$.pipe(
  map(
    // Filter to the second half
    contractTiles => contractTiles.filter(
      (item, index) => index >= (contractTiles.length / 2)
    )
  )
);

并在模板中使用异步管道

<div class="row no-gutters" *ngFor="let contact of lhsLinks$ | async">
  <h3>{{contact.name}}</h3>
</div>

在地图上使用异步管道，而不是订阅

2 个答案: