使用异步管道从observable读取对象字段-Java 学习之路

I want to gain a better understanding of when to use the async pipe in Angular.

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

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

For example:

让我们说我做了一个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}和），那还有什么办法吗？

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

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

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

除非你可以将相同的其他模板逻辑转换为* ngFor ..？

1 回答

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

尝试：
```
<tr *ngFor="let student of ($students | async).items">
  <td>{{student.id}}</td>
  <td>{{student.name}}</td>
  <td>{{student.description}}</td>
</tr>
```
回复于 2024-05-05T11:30:56+08:00

使用异步管道从observable读取对象字段

1 回答

相关问题