重用异步管道（可观察）输出

Question

我试图利用async管道在Angular中显示表，但出现错误：“ ...找不到类型为'object'的其他支持对象'[object Object]'。NgFor仅支持绑定到Iterables例如数组。”

我的代码：

<div *ngIf="studentList | async; else loading">
  <table>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
    <tr *ngFor="let student of studentList">
      <td>{{student.id}}</td>
      <td>{{student.first_name}}</td>
      <td>{{student.last_name}}</td>
    </tr>
  </table>
  {{studentList | json}}
</div>

<ng-template #loading>
  <div>Loading ...</div>
</ng-template>

后端返回 Observable<Student[]>

如果我将ngFor以下内容替换为，则可以使用，但这意味着要进行两个HTTP.get调用，但我不希望这样做：

<tr *ngFor="let student of (studentList | async)">

有我的方式再利用的价值studentList从ngIf内ngFor，从而使得只有一个请求到我的后台？

Answer 1

好的做法是使用$ sufix命名可观察对象，可以说studentList$是type Observable<Student[]>。您可以使用asyncwith as来获取类型为的studentList Student[]：

<div *ngIf="studentList$ | async as studentList; else loading">
  <table>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
    <tr *ngFor="let student of studentList">
      <td>{{student.id}}</td>
      <td>{{student.first_name}}</td>
      <td>{{student.last_name}}</td>
    </tr>
  </table>
</div>

Answer 2

除了@ibenjelloun 一个惊人而简单的答案之外，我还想通过使用添加另一种方法 templateOutlet

将评估传递Observable给 anng-template并使用模板 by templateOutlet。你可以在你的模板中有这样的东西：

<ng-container
    *ngTemplateOutlet="asyncTemplate;context:{listEvaluated: studentList | async}">
</ng-container>


<ng-template #asyncTemplate let-inputList="listEvaluated">
    <div *ngIf="inputList; else loading">
      <table>
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
        <tr *ngFor="let student of inputList">
          <td>{{student.id}}</td>
          <td>{{student.first_name}}</td>
          <td>{{student.last_name}}</td>
        </tr>
      </table>
    </div>
</ng-template>

请注意：对象中的|管道运算符context用作管道而不是按位运算符。