Angular 5:在点击事件中检测Firestore文档ID

时间:2018-08-28 14:11:33

标签: angular google-cloud-firestore angularfire2

上下文是我在数据表中显示集合,我想获取行ID以触发路由器进入详细信息页面。我成功使用检索了集合,但我无法设法获取行ID

我在如下所示的行中使用click事件

<tbody>
      <tr *ngFor="let row of rows | orderBy: key : reverse | filter:filter | paginate: { itemsPerPage: 100, currentPage: p}" (click)="detailFunc()" [id]="row.id">
           <td>{{row.entreprise}}</td>
           <td>{{row.secteurActivite}}</td>
           <td>{{row.filiere}}</td>
           <td>{{row.departement}}</td>
           <td>{{row.proprietaire}}</td>
           <td>{{row.telephone}}</td>
           <td>{{row.email}}</td>
       </tr>
</tbody>

这是附加的组件

import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFirestore } from 'angularfire2/firestore';
import { ExportAsConfig } from '../../services/export-as-config.model';
import { ExportAsService } from '../../services/export-as.service';
import { EconomieService } from '../../services/economie.service';
import { Ieconomie } from '../../economie';
import { Router, Params } from '@angular/router';


@Component({
  selector: 'app-economie',
  templateUrl: './economie.component.html',
  styleUrls: ['./economie.component.scss']
})
export class EconomieComponent{
  temp = [];
  rows = [];
  filter: string;
  @Input() id: string;

  // sort
  key: string = ''; 
  reverse: boolean = false;
  sort(key){
  this.key = key;
  this.reverse = !this.reverse;
};

// pagination indicator 
p: number = 1;

// export config section
config: ExportAsConfig = {
type: 'pdf',
elementId: "datatables",
};

  constructor(private afs: AngularFirestore,private dataService: EconomieService,
       private exportAsService: ExportAsService,private router: Router ) { 
       this.dataService.getData().subscribe((datas) => {
         this.temp = [...datas];
         this.rows = datas;
         console.log(this.temp);
       });
  }

  exportAs(type) {
    this.config.type = type;
    this.exportAsService.save(this.config, "Liste_Elus");
    // this.exportAsService.get(this.config).subscribe(content => {
    //   this.exportAsService.download("myfile", content);
    // });
  }

  detailFunc() {
    this.router.navigate(['/dataMan', this.id]);

  }
}

当我尝试在detailFunc函数中使用console.log(this.id)显示ID时,它显示为未定义。

有什么最佳策略可以存档吗?

0 个答案:

没有答案