Question

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

我的代码：

<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的值gradle test，从而只向后端提出一个请求？

Answer 1

一种好的做法是使用$ sufix命名可观察对象，可以说studentList$的类型为Observable<Student[]>。您可以将async与as一起使用，以获取类型为Student[]的studentList：

<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传递给ng-template，并使用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管道运算符用作管道，而不是按位运算符。

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

2 个答案: