Question

我希望更好地了解何时在Angular中使用异步管道。

我喜欢通过简单地添加一个订阅数据的管道来让数据与视图异步显示的想法。

但是，我只看到并正确应用了网络请求或其他一些自定义observable上的异步管道，它包含数据数组或单个字段（如可观察字符串）。

例如：

让我说我做了一个API调用，返回一大堆学生。

// This data is within a network response
$students = ...get...map... 
[
  {
    name: "Bob OConnel",
    id: 0,
    description: "young..."
  },
  {
    name: "Rick Luckard",
    id: 3,
    description: "young..."
  },
  {
    name: "James Wing",
    id: 2,
    description: "young..."
  }
]

这可以在如下模板中显示：

<tr *ngFor="let student of $students | async">
  <td>{{student.id}}</td>
  <td>{{student.name}}</td>
  <td>{{student.description}}</td>
</tr>

然而，鉴于ole REST API的理念。我还没有做过只返回数据数组的生产API调用。总是存在与数据数组相同级别的字段。但他们出于某种原因，我不想简单地将这些额外的字段丢弃在一个映射中。

因此，不是$ students是一个数组，它将成为：

// This data is within a network response
$students = ...get...map... 
{
  id: "69asdkasdkljasd6969"
  href: "someURLrepresentingTheDatasOrigins"
  length: 3
  items: [
    {
      name: "Bob OConnel",
      id: 0,
      description: "young..."
    },
    {
      name: "Rick Luckard",
      id: 3,
      description: "young..."
    },
    {
      name: "James Wing",
      id: 2,
      description: "young..."
    }
  ]
}

所以这意味着在模板中，我可以在$ students observable上抛出异步管道，但不能在其中的字段上抛出异步管道。

这显然不起作用，因为可观察量中的字段是可观察的：

{{$students.id| async}}
// or
<tr *ngFor="let student of $students.items | async">...</tr>

那么，这是否意味着在这样的网络响应中，如果我想在模板中异步绑定它们，我应该将响应的值映射到它们各自的可观察对象中？如果我不希望网络响应分成一百万个较小的对象（或者在我的例子中是{id，length，href}和{items}），有没有办法解决这个问题。

感觉好像我遗漏了一些显而易见的关于使用可观察物的东西，这些东西可以为我解决这个问题。如果我的问题不够明确，请告诉我。

更新我找到了一些我不知道可以在这里做的事情：https://toddmotto.com/angular-ngif-async-pipe

对于某种加载指示符应该代替异步数据的情况非常有用。它还可以将订阅整合到一个地方。这将是一个偏好的问题，但我认为在我的许多情况下，我宁愿将订阅投入* ngIf。

除非您可以将相同的 else 模板逻辑转换为* ngFor ..？

Answer 1

您无需将值映射到各自的可观察对象中。相反，您可以简单地将您的observable与hyper-parameter configuration管道一起包装在括号中，然后到达observable返回的对象内的字段。

尝试：

tensorflow

使用异步管道

1 个答案: