Question

我有一个ngFor的模板，它通过异步observable接收数据：

<div *ngFor="let result of data.results">
  <div>
    <img [src]="parseSrc(result.src)" alt="{{ getCaption(result.id) | async }}" />
    {{ getCaption(result.id) | async }}
  </div>
</div>

如您所见，getCaption方法被调用两次。它的代码如下：

public getCaption(id: string) {
  return this.data$.results
    .map(results => {
      let result = results.find(r => r.id === id);
      return result && result.caption || '';
    })
}

两次调用它是否可以这样做？我觉得调用该函数两次是冗余和内存密集型的。还有什么其他选择？我在想像在模板中创建一个变量会很好，但这不是一个角度允许的设施。由于这是另一个异步调用的结果，因此在控制器代码中执行此逻辑并不理想，我觉得应该有一种相对优雅的方式在模板中执行这两个相同的调用。

注意：这是一个人为的例子。

Answer 1

您可以将其包装在ngIf中并使用as语法将其绑定到本地值，如下所示：

<div *ngIf="getCaption(result.id) | async as caption">
    <img [src]="parseSrc(result.src)" alt="{{ caption }}" />
    {{ caption }}
</div>

Angular 2：模板循环中的重复异步调用

1 个答案: