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'],
                  };
              })
          });
      }

要读取，写入，更新和删除Firestore，我遵循了一个教程，将其保存在单独的服务中。我的文件“ crud-service.ts”具有：

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

正在从Firestore中读取文章并成功过滤“参数”。

在App（客户端）中，我要过滤“ parameter2”

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

非常感谢您提供任何提示！

Answer 1

html

00000000000000001100100000100000 (-51232)
11111111111111110011011111100000 (51232)

TS

<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>

离子段（Tab），可通过一个参数过滤我的卡片列表

1 个答案: