Question

我正在使用主/详细设置探索新数据表。我可以从Firebase填充数据，但我正在尝试使用其中一列中的按钮单击以在另一个视图或模态窗口中显示编辑表单。下面的按钮工作正常，但我在事件参数中捕获db $ key时遇到问题。 OOP技术似乎不起作用。我试过了成员。$ key和row。$ key。密钥显示在下面的第二列中，因此它位于模板上。我在模板中找不到这个DataSource可观察对象。想法???

<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>

Answer 1

我制定了一个简单的解决方案。问题是我在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>

Angular Material 2数据表：模板中的捕获属性？

1 个答案: