javascript - 如何在已被模板订阅的 Observable 上循环 (forEach)

Question

我有一个 AFS observable，我可以像这样在我的前端显示它:

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

我的 Facebook 服务:

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>

现在我有一个文本区域，提交时会触发一个事件。我想要做的是循环遍历 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 的结果。

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>

通过执行此操作，您的函数 sendSms 将按原样工作，并将获取联系人列表。

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