我喜欢通过简单地添加订阅数据的管道来使数据与视图异步显示的想法.
但是,我只是在网络请求或其他一些自定义observable上看到并正确应用了异步管道,它包含数据数组或单个字段(如可观察字符串).
例如：
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,{
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调用.总是存在与数据数组相同级别的字段.但是他们出于某种原因,我不想简单地将这些额外的字段丢弃在Mapping中.
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",description: "young..."
},{
name: "Rick Luckard",{
name: "James Wing",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>
那么,这是否意味着在这样的网络响应中,如果我想在模板中异步绑定它们,我应该将响应的值映射到它们自己的各个可观察对象中？如果我不希望网络响应分成一百万个较小的对象(或者在我的例子中是{id,length,href}和{items}),那还有什么办法吗？
感觉好像我遗漏了一些关于使用observable的明显的东西,这些东西会为我解决这个问题.如果我的问题不够明确,请告诉我.
UPDATE
我找到了一些我不知道可以在这里做的事：https://toddmotto.com/angular-ngif-async-pipe
对于某种加载指示符应该代替异步数据的情况非常有用.它还可以将订阅整合到一个地方.这将是一个偏好的问题,但我认为在我的许多情况下,我宁愿将订阅投入* ngIf.
除非你可以将相同的其他模板逻辑转换为* ngFor ..？
尝试：
<tr *ngFor="let student of ($students | async).items">
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.description}}</td>
</tr>
