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

Question

我是 Ionic、Angular 和 Firebase 的新手，运行遇到了一个我无法解决的问题，即使在我阅读了所有关于它的主题并尝试将它们应用于我的场景。

情况：我正在构建一个 Ionic4 (Angular) 应用程序，它应该列出来自网络的新闻文章，并使用 Firebase 的 Firestore 作为后端。每篇文章都有一个发送者和一个接收者，我成功地过滤了所有一个参数以仅获取具有 "me == receiver" 的文章。在客户端，在应用程序中，我现在想针对文章是未读还是已读的参数进行额外过滤。

我的目标是使用 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'],
                  };
              })
          });
      }

要读取、写入、更新和删除 to/from Firestore，我按照教程将其保存在单独的服务中。我的文件 "crud-service.ts" 有：

  read_Articles() {
      return this.firestore.collection('Articles', ref => ref.where("parameter","==","1")).snapshotChanges();
  }

正在从 firestore 读取文章并过滤 "parameter" 现在成功了。

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

预期结果：我想在应用程序中有两个选项卡（ION 段），用于过滤 unread/read.

的传入数据

非常感谢您的任何提示！

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>

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

Ion Segments (Tabs) to filter my list of cards by one parameter

ionic-framework

angular

ionic4