Question

我在服务中有以下地图：

   private slotlist: Map<number, SlotItem>;

SlotItem是一个类。我通过以下方式从服务中返回了广告位列表：

getSlotItems(): Observable<ObservedValueOf<Map<number, SlotItem>>>

有两点不清楚：

我如何订阅这些广告位

this.slotitems = this.BService.getSlotItems（）;

this.slotitems.subscribe（val => console.log（val））;
如何使用ngfor遍历项目

我尝试过

   <ion-item *ngFor="let item of slotitems">

但是我得到了一个错误，该错误说明了不能将其分配给NgIterable的情况。

以下帮助中的更改：

如果我改变

<ion-item *ngFor="let item of slotitems | async">

如果我写的话，会在html中出现错误

          <ion-icon *ngIf="item.value.active"
 [name]="item.value.icon" slot="start"></ion-icon>

字段“ active”和“ icon”是slotitem类的成员。

ERROR TypeError: "_v.context.$implicit.value is undefined"

目前，在服务中已将slotitems列表设置为fix。后来这来自数据库

this.slotlist.set(1, new SlotItem( 1, true,  'None', 'None', 'None' ));

如果我添加了安全遍历运算符，则该运算符有效，但不适用于“ div”

      <div *ngIf="!item?.value?.active" style="color:darkgray">
        <{{item.value.title}}>
      </div>

Answer 1

代替：

<ion-item *ngFor="let item of slotitems">

使用：

<ion-item *ngFor="let item of slotitems | async | keyvalue">

async pipe根据需要订阅和取消订阅您的可观察对象，并在每次发射新的可观察对象时返回其最新值。

这也意味着您不再需要自己订阅可观察的对象。

Answer 2

我切换到BehaviorSubject和CArray。现在工作正常

在我写的服务中

private slotlist: Array<SlotItem>;
private behSlotData: BehaviorSubject<SlotItem[]> = new BehaviorSubject<SlotItem[]>([]);

getSlotItems(): Observable<SlotItem[]>

在组件中

  public slotitems: Observable<SlotItem[]>;
...
  this.slotitems = this.btClassic.getSlotItems();

现在在html中，我使用

*ngFor="let item of slotitems | async"

由于异步，成员访问是直接的

<ion-icon *ngIf="item.active" [name]="item.icon" slot="start"></ion-icon>

Answer 3

1。要订阅可观察的内容，请执行以下操作

this.BService.getSlotItems().subscribe(data=>{
     this.slotitems = data.values();
})

data.values（）将可迭代地返回地图中的所有值

在上面添加* ngFor后，如果不能正常工作，则添加如下所示的异步管道

* ngFor =“让slotitems的项|异步”

然后直接使用item.id和item.active

这将通知slotitems来自该服务或将动态加载

NgFor迭代器在Observable之上

3 个答案: