<分区>
我想更好地了解何时在 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..?