异步方法第一次不起作用

Question

我是 Firebase 的新手。我正在使用 Firestore 数据库和 Ionic，我在异步调用时遇到了这个问题，但我无法解决。基本上在 item 变量中是我保存在 firestore 数据库中的数据。但是当我想通过一个按钮显示它们时，在一个新的 html 页面中发生了一件奇怪的事情，在 url 中，传递的参数立即出现并消失，不再起作用。过去我有一个类似的问题，我使用角管道 "async" 解决了这个问题，但在这种情况下它甚至不起作用。 详细来说，我有一个组件中的项目列表：

  ngOnInit() {
    this.itemService.getItemsList().subscribe((res)=>{
      this.Tasks = res.map((t) => {
        return {
          id: t.payload.doc.id,
          ...t.payload.doc.data() as TODO
        };
      })
    });
    
  } 

在 item.service.ts 我已经定义了函数：

constructor(
    private db: AngularFireDatabase,
    private ngFirestore: AngularFirestore,
    private router: Router
) { }

  getItemsList() {
    return this.ngFirestore.collection('items').snapshotChanges();
  }
  getItem(id: string) {
        return this.ngFirestore.collection('items').doc(id).valueChanges();
      }

对于每个项目，我都有一个按钮来显示详细信息：

<ion-card *ngFor="let item of Tasks" lines="full">
....
<ion-button routerLinkActive="tab-selected" [routerLink]="['/tabs/item/',item.id]" fill="outline" slot="end">View</ion-button>

在组件 itemsDescription.ts 我有：

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = params['id'];
      });
    this.itemService.getItem(this.id).subscribe((data)=>{
    this.item=data;
    });  
  }
 

终于在html页面中：

    <ion-card-header>
      <ion-card-title>{{item.id}}</ion-card-title>
    </ion-card-header>
    <ion-icon name="pin" slot="start"></ion-icon>
        <ion-label>{{item.Scadenza.toDate() | date:'dd/MM/yy'}}</ion-label>
    <ion-card-content>{{item.Descrizione}}</ion-card-content>

显示了 Scadenza 和 Descrizione 信息，而不是 id。 url 也应该是 tabs/items/:id 但是当我点击按钮显示项目信息时，传递的参数立即消失，只显示 tabs/items。如果我将数据删除到 {{}} 中，则 url 中的参数不会消失

已解决 我遵循了本指南https://forum.ionicframework.com/t/async-data-to-child-page-with-ionic5/184197。所以放？ ，例如 {{item?.id}} 现在一切正常

Answer 1

您的嵌套代码顺序不正确。订阅后会得到id的值。

检查此代码：

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = params['id'];
 this.profileService.getItem(this.id).subscribe((data)=>{
    this.item=data;
    });  
      });
   
  }