Question

我有一个AFS观察者，我可以在我的前端展示这样：

constructor(
    public fb: FirebaseProvider, 
) {
    this.group = this.navParams.get('group');
    this.contactsList = this.fb.getContactsByGroup(this.group.id);
}

我的fb服务：

getContactsByGroup(groupId: string):Observable<Contact[]> {
    return this.afs.collection<Contact>(`groups/${groupId}/contacts`).valueChanges();
}

然后我的模板：

<single-contact-list-item 
    [contactId]="contact.id" 
    (goToModalEvent)="onGoToModal($event)"
    *ngFor="let contact of contactsList | async">
</single-contact-list-item>

现在我有一个textarea，当提交时会触发一个事件。我想要做的是遍历Observable（contactsList）中的每个项目并获取一个属性，例如：

public sendSMS(): void {
    this.contactsList.forEach(contact => {
        console.log(contact.number); // nothing!
    })
    //this.deviceProvider.sendSMS(this.contactsList, this.message);
}

我觉得问题是通过在模板中使用异步管道已经订阅了Observable。任何帮助表示赞赏。

Answer 1

您需要先订阅Observable才能访问数据流，然后再循环。尝试

public sendSMS(): void {
    this.contactsList.subscribe(lists=>{
        lists.forEach(contact=>{
            console.log(contact.number);
        }
    }
  }

Answer 2

您需要在组件中的变量中手动获取Observable的结果。

lambda

并将模板更改为仅在constructor( public fb: FirebaseProvider, ) { this.group = this.navParams.get('group'); this.fb.getContactsByGroup(this.group.id).subscribe(list => this.contactsList = list); }可用时呈现。并遍历列表。

contactList

通过这样做，您的函数<ng-container *ngIf="contactsList"> <single-contact-list-item [contactId]="contact.id" (goToModalEvent)="onGoToModal($event)" *ngFor="let contact of contactsList"> </single-contact-list-item> <ng-container>将按原样运行，并将获得contcts列表。

sendSms

Answer 3

您必须重新获取要迭代的数据，因为contactsList可能已经被消耗了。因此，有必要再次致电this.fb.getContactsByGroup(this.group.id)。

＆＃13;

public sendSMS(): void {
  // use .first() to just process once
  this.fb.getContactsByGroup(this.group.id).first().subscribe(contacts => {
    contacts.forEach(contact => {
      console.log(contact.number);
    });
    // <>
  })
  
  // notice the code above is asynchronous, so if the line below
  // depends on it, place it on the line marked with "// <>" above
  //this.deviceProvider.sendSMS(this.contactsList, this.message);
}

＆＃13;

Answer 4

您可以重用包含数组的observable并对流执行某些操作，以便提取有趣的数据。如果它仅用于与您的数据相关的副作用，您可以使用点击操作符并在内部执行forEach。

 public sendSMS(): void {
    this.contactsList.pipe(
      tap(contactArray => {
         contactArray.forEach(contact => {
           // Do side effect operations with your array
         });
      }),
      // execute only once and complete the observable
      take(1)
    ).subscribe();
 }

   this.deviceProvider.sendSMS(this.contactsList, this.message);

如何在已由模板

4 个答案: