在html标签 如何直接使用rxjs返回的数组流中的字段

Question

还是不能用这种写法，请老师指点，我根据课程自己做项目例子，我是直接在标签中使用一个返回的数组流， 但无法指定到数据的俱体的数值

Answer 1

提问者 慕丝0294471 2020-02-01 19:17:48

第一个图：我想获取cImgAddress的值，作为背景图片，
第二个图：已经返回的是数组，并且按下面的方式，值可以返回，
请问：在ngStyle中通过流，如何获取：imgItem. cImgAddress.
请指点，谢谢。

• 接灰的电子产品 #1

  如果是数组，你 ngStyle 中想指定数组里面的哪张图片呢？
  
  如果数组成员有 ID 的话，对于流做筛选，使用 flter 操作符，比如声明一个成员变量 selectedId 和 一个 流 selectedImage$
  
  ```
  selectedImage$: Observable<string>;
  selectedId: string;
  ngOnInit() {
  this.selectedImage$ = this.loginUIImage$.pipe(filter(item => this.selectedId === item.id), map(item => `url(${item.cImgAddress})`))
  }
  ```
  
  这样就可以在 ngStyle 中引用 selectedImage$ | async

• 提问者 慕丝0294471 #2

  1、返回的是一组json数据，例子如下，而且是只有一张图片

Answer 2

接灰的电子产品 2020-02-01 10:04:52

使用 async 管道  loginUIImg$ | async 没错的，但是你要确保返回的是一个数组，可以打印出来看一下。而且ngstyle 那个地方也要使用 async 管道