2

我花了一段時間嘗試在沒有任何運氣的情況下追蹤堆棧溢出的解決方案。Ionic 3離子複選框選中的屬性在Firebase訂閱功能中無法查詢

我使用的離子3 檢查屬性在我的HTML頁面的聯繫人列表的一部分,因爲這樣..

<ion-list> 
    <ion-item *ngFor="let friend of friends_profile_data | async ;"> 
    <ion-label> 
     <h2>{{friend.name}}</h2> 
    </ion-label> 
    <ion-checkbox [checked]="friend.checked" (click)="toggleItem(friend)" ></ion-checkbox> 
    </ion-item> 
</ion-list> 

..和有關聯的.ts的toggleItem功能文件:

toggleItem(friend): void { 
    friend.checked = !friend.checked; 
} 

在我與一個虛擬的數據庫,我能夠通過使用相同的.ts文件中的以下成功查詢的每一個「朋友」這個狀態試運行(沒有|異步的離子內容線爲本地虛擬DB)。

this.friends_profile_data.forEach((friend) => { 
    var i =0; 
    var total = friend.month.length; 
    for(;i < total; i++) { 
    if(friend.checked) { 
     console.log(friend.name); 
    } 
    }      
}); 

這會貫穿我聯繫人列表中的所有朋友,找到我選擇的人,並給我他們的名字,而不是那些沒有被選中的人。都好。

工作正常,我已經將所有內容都連接到了Firebase數據庫。除了當我嘗試在Firebase訂閱功能中執行類似的查詢時,一切都進行得很順利,但它不起作用。下面是該代碼看起來像..

this.friends_profile_data.subscribe(friends => { 
    friends.forEach((friend) => { 
    if (friend.checked) { 
     console.log(friend.name); 
    } 
    })     
}); 

凡在虛擬本地數據庫中找到friends_profile_data在這種情況下返回一組類似的數據,但是從我的火力地堡DB。

而不是隻返回我在列表中選擇的朋友,它記錄每個朋友的名字..好像它沒有在IF語句中註冊friend.name

我使用的替代品嚐試過,在任何情況下,他們的工作,如:

friend.checked = true 
friend.checked == true 
friend.checked === true 

..但沒有任何作品。

這應該工作嗎?是否有一些問題我不知道,通過在Firebase訂閱功能中對已檢查的屬性執行查詢而引入了這個問題?

另外,我是否真的很幸運,它與本地虛擬DB一起工作,實際上有一種更強大的方式來處理Firebase訂閱功能?使用檢查屬性的方法來自於我在Ionic早期的一段時間內已經經歷了一段時間的教程。

感謝任何人都可以提供的見解。由於這是我的第一篇文章,我試圖儘可能提供信息,但請告訴我是否還有其他任何我可以添加的內容,以幫助解決問題。

回答

0

在調用Observable的訂閱之前,由於此Observable包含好友數組,因此您需要先使用規則過濾這些好友。您可以使用地圖功能來轉換'friends_profile_data'。它用過濾的內容創建一個新的觀察值。

this.friends_profile_data 
    .map(array0 => { 
      return array0.filter(friend => friend.checked === true) 
     }) 
    .subscribe(
     ... 
    ); 
+0

謝謝喬,那些功能是非常有用的。我有地圖和過濾器可用於Firebase數據庫中的任何內容,例如(friend => friend.name ==='Some Name')..但似乎有相同的問題,它不識別離子-checkbox **選中**屬性** checked.friend **,它不存在於數據庫中,但在模板中。 – sean

+0

如果明確說明以任何方式提供幫助,friends_profile_data變量將連接到Firebase DB,如下所示:'this.friends_profile_data = this.dataProvider.angularfireDB.list('/ user_friends/$ {this.userCalendarProvider.user_id} /');' 上面的編輯,意思是** friend.checked ** – sean

+0

謝謝肖恩。我不熟悉離子。我會做一些閱讀。 –