2017-07-28 61 views
0

我正在探索带有主/细节设置的新数据表。我可以填充来自Firebase的数据,但我试图在其中一列中使用按钮单击以在另一个视图或模式窗口中显示编辑表单。下面的按钮工作正常,但我在事件参数中捕获db $ key时遇到了问题。 OOP技术似乎不起作用。我试过了会员。$ key和row。$ key。密钥显示在下面的第二列,因此它住在模板上。我没有在模板中可以看到这个DataSource。想法?角度材料2数据表:在模板中捕获属性?

<ng-container cdkColumnDef="edit"> 
    <md-header-cell *cdkHeaderCellDef> Edit </md-header-cell> 
    <md-cell *cdkCellDef="let row"> <button class="badge" 
      (click)="goToDetailPage(member.$key)">Edit</button> </md-cell> 
    </ng-container> 

    <!-- key Column --> 
    <ng-container cdkColumnDef="key"> 
    <md-header-cell *cdkHeaderCellDef> Key </md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row.$key}} </md-cell> // This displays the db key. 
    </ng-container> 

回答

0

我制定了一个简单的解决方案。问题是我不明白AM2数据表中的这一行数据。我的头仍然是传统的object.property模式。

这是master-detail可以如何与AM2数据表一起使用的。从下面的第二列中获取模板变量并将其作为单击参数插入。它通过关键看你想如任何功能:

goToDetailPage(selectedMemberKey) { 
    console.log('selectedMember: ', selectedMemberKey); 
    this.router.navigate(['/admin/membersAdmin/editMember', selectedMemberKey]); 
    }; 

deleteMember(selectedMemberKey) { 
     // Call the confirm dialog component 
     this.confirmService 
      .confirm('Confirm Delete', 'This action is final. Gone forever!') 
      // .do(); 
      .do(res => {if (res === true) { 
       this.membersAdminService.deleteMember(selectedMemberKey); 
      }}) 
      .subscribe(res => this.result = res, err => err); 
    } 

对于HTML模板:

 <!-- Delete/Edit Buttons Column --> 
    <ng-container cdkColumnDef="delete"> 
    <md-header-cell *cdkHeaderCellDef> Delete/Edit </md-header-cell> 
    <md-cell *cdkCellDef="let row"> 
     <button (click)="deleteMember(row.$key)">Delete</button> 
     <button (click)="goToDetailPage(row.$key)">Edit</button> 
    </md-cell> 
    </ng-container> 
+0

你就不能传递'row'成'goToDetailPage(行)'?我相信您不需要您的密钥列 –

+0

Leo Caseiro,我们需要使用以下URL键访问Firebase数据库中的密钥:.../editMember/-Koirn5PbcbPbfHRbaWv。我不知道如何使用行数据,名称,技能标题等来将数据从数据库导入编辑表单。必须有Firebase API目前似乎没有的db属性搜索。不过,我很快就开始进行这样的搜索,所以也许我会弄清楚。尽管我们可以通过客户端的名称属性进行搜索。 – Preston

+0

对不起,我的意思是,如果你传递行,你应该可以访问你的方法中的'row。$ key'。 –