angular - 使用异步管道从可观察对象中读取对象字段

标签 angular typescript http asynchronous rxjs

<分区>

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

我喜欢通过简单地添加订阅数据的管道让数据异步显示到 View 的想法。

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

例如:

Lets say I make an API call that returns an array of college students.

// 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..."
  }
]

This could be displayed in a template like so:

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

但是,鉴于 ole REST API 理念。我还没有进行过只返回一组数据的生产 API 调用。始终存在与数据数组处于同一级别的字段。但它们存在是有原因的,我不想简单地将那些额外的字段丢弃在映射中。

So instead of $students being an array, it would become:

// 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 上抛出一个异步管道,但不能在其中的字段上抛出。

This obviously doesnt work, because the fields within the observables are observables:

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

那么,这是否意味着在像这样的网络响应中,如果我想在模板中异步绑定(bind)到它们,我应该将响应的值映射到它们自己的单独的 observable 中?如果我不希望网络响应拆分成一百万个更小的对象(或者在我的示例中:{id, length, href} 和 {items}),有什么办法可以解决这个问题。

感觉好像我遗漏了一些关于 observable 的使用的明显信息,这些信息可以为我解决这个问题。如果我的问题不够清楚,请告诉我。

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

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

除非您可以将相同的else 模板逻辑放入*ngFor..?

最佳答案

您不需要将值映射到它们自己的单独可观察对象中。相反,您可以简单地将您的 observable 与 async 管道一起包装在括号中,然后到达 observable 返回的对象内部的字段。

尝试:

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

关于angular - 使用异步管道从可观察对象中读取对象字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48776255/

相关文章:

javascript - 如何从 Angular 2/5 中的服务订阅对象?

python - 如何在Python中使用SSH连接从远程主机发送HTTP GET请求?

angular - 响应状态 - Angular 5

javascript - 类型 'mergeMap' 上不存在属性 'Observable<any>'

angular - 我需要在 CI 作业中缓存什么以避免每次 ngcc 重新编译?

javascript - 使用 webpack 捆绑 NodeJS/TypeScript 应用程序的好处

angular - Ionic 3 - 如何使用默认属性禁用滚动而不溢出 :hidden

node.js - 为什么 Web 服务器仍然使用 http 1.1 而不是 http 2?

php - 如何在 Laravel 中部署 Angular 5 项目?

angular - 拦截来自 Angular2 的所有 HTTP 请求