加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 09:57:13 所属栏目:安全 来源:网络整理
导读:我想更好地了解何时在Angular中使用异步管道. 我喜欢通过简单地添加订阅数据的管道来使数据与视图异步显示的想法. 但是,我只是在网络请求或其他一些自定义observable上看到并正确应用了异步管道,它包含数据数组或单个字段(如可观察字符串). 例如: Lets say
我想更好地了解何时在Angular中使用异步管道.

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

但是,我只是在网络请求或其他一些自定义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 ..?

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

尝试:

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读