Ion Segments (Tabs) 通过一个参数过滤我的卡片列表

Question

我对 Ionic、Angular 和 Firebase 还很陌生，遇到了一个我无法解决的问题，即使我阅读了所有关于它的线程并尝试将它们应用到我的场景中。

情况： 我正在构建一个 Ionic4 (Angular) 应用程序，它应该列出来自网络的新闻文章，并使用 Firebase 的 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();
  }

现在已成功从 firestore 读取文章并过滤“参数”。

在应用程序（客户端）中，我想过滤“parameter2”

预期结果： 我想在应用程序中有两个选项卡（ION 段），用于过滤传入数据以进行未读/已读。

非常感谢您的任何提示！

Answer 1

html

<ion-segment>\\ngMOdel helps to Default ur unread 
<ion-segment-button [(ngModel)]="Unreaddata">\\use ngModel ,declare ur ts Unreaddata:any='unread'
    <ion-label>Unread</ion-label>
</ion-segment-button>
<ion-segment-button>
    <ion-label>Read</ion-label>
</ion-segment-button>

TS

<div [ngSwitch]="Unreaddata">\\read variable
<ion-list *ngSwitchCase="'Unread'">\\read string
write ur unread code here \\display unread data
<\ion-list>
<ion-list *ngSwitchDefault>
write ur unread code here \\display read data
<\ion-list>
<div>