Я довольно новичок в Ionic, Angular и Firebase и столкнулся с проблемой, которую не могу решить, даже после того, как прочитал все темы об этом и попытался применить их к моему сценарию.
Ситуация: я создаю приложение Ionic4 (Angular), которое должно перечислять новостные статьи из Интернета, и использует Firebase's Firestore в качестве бэкэнда.У каждой статьи есть отправитель и получатель, и я успешно фильтрую все параметры, чтобы получить только те статьи, в которых есть «я == получатель».На стороне клиента в приложении я теперь хочу дополнительно отфильтровать параметр, является ли статья непрочитанной или прочитанной.
Моя цель - сделать это с помощью сегментов Ionic (https://ionicframework.com/docs/api/segment).
. Я просмотрел множество угроз, где некоторые рекомендовали использовать каналы, в то время как другие говорили, что этого можно достичь проще.Решение, которое я пытался применить, пока не работает.
Мой HTML "Tab2.html" выглядит следующим образом:
<ion-segment>
<ion-segment-button checked>
<ion-label>Unread</ion-label>
</ion-segment-button>
<ion-segment-button>
<ion-label>Read</ion-label>
</ion-segment-button>
</ion-segment>
<ion-card *ngFor="let item of articles" >
<ion-item>
<ion-avatar slot="start">
<img src="/assets/barack-obama.svg">
</ion-avatar>
<ion-label>
<h3>Tomas</h3>
<p>{{item.comment}}</p>
</ion-label>
<button ion-button clear icon-only (click)="openModal(item.id)" class="morebutton">
<ion-icon name="more"></ion-icon>
</button>
</ion-item>
</ion-card>
...
Мой файл TS "Tab2.page.ts "включает в себя:
export class Tab2Page implements OnInit {
articles: any;
filteredarticles:any;
articleName: string;
dataReturned:any;
constructor(private crudService: CrudService,public modalController: ModalController) { }
ngOnInit() {
this.crudService.read_Articles().subscribe(data => {
this.articles = data.map(e => {
return {
id: e.payload.doc.id,
isEdit: false,
Name: e.payload.doc.data()['Name'],
title: e.payload.doc.data()['title'],
description: e.payload.doc.data()['description'],
image: e.payload.doc.data()['image'],
comment: e.payload.doc.data()['comment'],
};
})
});
}
Чтобы читать, писать, обновлять и удалять в / из Firestore, я следовал учебному пособию, чтобы хранить его в отдельной службе. Мой файл" crud-service.ts "имеет:
read_Articles() {
return this.firestore.collection('Articles', ref => ref.where("parameter","==","1")).snapshotChanges();
}
, который читает статьи из магазина и теперь успешно фильтрует «параметр».
В приложении (клиент) я хочу отфильтровать «параметр2»
Ожидаемый результат. Я хочу, чтобы в приложении было две вкладки (сегмент ION), которые фильтруют входящие данные на непрочитанные / прочитанные.
Большое спасибо за любую подсказку!