Question

我正在使用Angular 5打字稿和Firestore。当用户单击查看按钮时，我想在新页面中显示详细信息。我有一个兄弟姐妹组件，其中一个组件（viewFarmhouse）用于显示农舍，而另一个组件（proges）在按下按钮时显示农舍的详细信息。这是我的代码：

viewFarmhouse.html

        <div class="col-md-6 " *ngFor="let farm of farmhouse | async ">


      <div class="card" >
          <button type="button" class="btn btn-success" data-                  
      toggle="modal"  (click)="onView(farm.id)"  name="button">View</button>

         </div>
      </div>

viewFarmhouse.ts

     import { ProgressComponent  } from './progress.component';

     constructor(private afs: AngularFirestore, private comp: 
       ProgressComponent ){


       }
     onView(id){ 
       this.comp.view(id);  }

progress.ts

 view(id){
    this.farmDoc = this.afs.doc('farmhouse/'+id);
    this.farm = this.farmDoc.valueChanges();

   console.log(id);

  this.features = 
    this.afs.collection
      ("farmhouse").doc(id).collection("features").valueChanges();
   }

progress.html

<div class="container">
<div class="row">
<div class="col-md-8">
 <h1 class= "center" style="float:right;margin-right: 10%;"> {{(farm | 
 async)?.name }} </h1>
</div>

</div>

 <div class="row">
 <div class="col-md-8">
 <p>
 <strong>Description: </strong>
 {{(farm | async)?.description }}</p>

 </div>
 </div>

  <div class="row">
  <div class="col-md-8">
 <p>
 <strong>Address: </strong> {{(farm | async)?.address }}</p>

 </div>
 </div>

在progress.ts组件中，我可以在控制台上完美获取ID，但无法在progress.html文件中显示农舍的详细信息。任何帮助将不胜感激！

在Angular 5 Firestore中打开新的详细信息页面

0 个答案: