请注意，上述代码示例是使用 Angular 6+ 版本和 AngularFire2 库进行的示范。确保已正确安装和配置这些依赖项。

import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

interface Item {
  name: string;
  age: number;
}

@Component({
  selector: 'app-root',
  template: `
    

      

        {{ item.name }} - {{ item.age }}
      
    
  `
})
export class AppComponent {
  private itemsCollection: AngularFirestoreCollection;
  items: Observable;

  constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection('myCollection');

    // 添加查询条件
    const query = this.itemsCollection.where('name', '==', 'John');
    // 添加排序条件
    query.orderBy('age', 'desc');

    // 订阅查询结果的更改
    this.items = query.valueChanges();
  }
}

在此示例中，我们创建了一个名为 Item 的接口，以便定义集合中的文档结构。然后，在组件的构造函数中，我们注入了 AngularFirestore 服务，并使用 collection() 方法获取要查询的集合。然后，我们使用 where() 方法添加查询条件，并使用 orderBy() 方法添加排序条件。最后，我们使用 valueChanges() 方法订阅查询结果的更改，并将结果存储在 items 变量中，以供在模板中使用。

请注意，此示例中的代码片段仅用作参考。根据你的实际需求，你可能需要调整代码来适应你的项目。