Angular -（点击）在我的 Material/CDK 数据表中没有触发

Question

在我的模板中考虑以下 table

    <mat-table #table [dataSource]="dataSource">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- ChangeId Column -->
  <ng-container cdkColumnDef="fileName">
    <mat-header-cell *cdkHeaderCellDef mat-sort-header> File </mat-header-cell>
    <mat-cell *cdkCellDef="let row" (click)="downloadFile(row.SerialNumber)"> <a (click)="downloadFile(row.SerialNumber)">{{row.File}}</a> </mat-cell>
  </ng-container>

  <!-- DateSubmitted -->
  <ng-container cdkColumnDef="fileType">
    <mat-header-cell *cdkHeaderCellDef mat-sort-header> File Type </mat-header-cell>
    <mat-cell *cdkCellDef="let row"> {{row.FileType}} </mat-cell>
  </ng-container>

  <!-- ChangeSponsor -->
  <ng-container cdkColumnDef="contentType">
    <mat-header-cell *cdkHeaderCellDef mat-sort-header> Content Type </mat-header-cell>
    <mat-cell *cdkCellDef="let row"> {{row.ContentType}} </mat-cell>
  </ng-container>

  <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *cdkRowDef="let row; columns: displayedColumns;">
  </mat-row>
</mat-table>

以及它在组件中调用的方法class

downloadFile(serialNumber: number): void {
    this.fileService.downloadFile(serialNumber);
  }

在上面 table 我正在尝试创建一个调用 downloadFile 方法的（点击）事件，然后调用服务中的一个方法 class 将文件发送到浏览器供用户下载。但是，在上述 none 次尝试中，它是否有效。所以我肯定遗漏了一些东西。

有人可以让我知道我错过的是什么不让这个工作吗？

非常感谢您对此的调查。

编辑：有人告诉我这可能是重要信息，但这是一个子组件。

Answer 1

为什么要把点击事件放两次？

 <mat-cell *cdkCellDef="let row" (click)="downloadFile(row.SerialNumber)"> <a (click)="downloadFile(row.SerialNumber)">{{row.File}}</a> </mat-cell>

尽量只在锚元素中保留它：

 <mat-cell *cdkCellDef="let row"> <a (click)="downloadFile(row.SerialNumber)">{{row.File}}</a> </mat-cell>

Answer 2

我在我的 table 行之一中放置了几个按钮。编辑一个和你的情况类似。

<ng-container matColumnDef="delete">
        <mat-header-cell *matHeaderCellDef> Delete / Edit </mat-header-cell>
        <mat-cell *matCellDef="let row">
          <button (click)="deleteMember(row.member_id)">Delete</button>
          <button (click)="goToDetailPage(row.member_id)">Edit</button>
        </mat-cell>
      </ng-container>

在组件中：

  //  Called when edit button is clicked. Useer sees a data populated
  //    edit form.  Data is downloaded from a db.

  goToDetailPage(memberId) {
    this.router.navigate([
        '/members/editMember',
        memberId]);
  }


  // Called when delete button is clicked.

  public deleteMember(memberId) {
      // Call the confirm dialog component
      this.confirmService.confirm('Confirm Delete', 'This action is final. Gone forever!')
          .switchMap(res => {if (res === true) {
              return this.membersAdminService.deleteMember(memberId);
          }})
          .subscribe(
              result => {
                this.success();
              },
              (err: HttpErrorResponse) => {
                  console.log(err.error);
                  console.log(err.message);
                this.messagesService.openDialog('Error', 'Delete did not happen.');
              }
          );
  }

Answer 3

好的，我的问题确实是由于组件嵌套在父级中，所以为了让点击事件向上移动到父级，我需要通过@Output 发出它。我照做了。

子模板

<div *ngIf="isDataAvailable">
  <div class="example-container mat-elevation-z8">
    <div class="example-header">
    </div>
    <mat-table #table [dataSource]="dataSource">

      <!--- Note that these columns can be defined in any order.
            The actual rendered columns are set as a property on the row definition" -->

      <!-- ChangeId Column -->
      <ng-container cdkColumnDef="fileName">
        <mat-header-cell *cdkHeaderCellDef mat-sort-header> File </mat-header-cell>
        <mat-cell *cdkCellDef="let row"> {{row.File}} </mat-cell>
      </ng-container>

      <!-- DateSubmitted -->
      <ng-container cdkColumnDef="fileType">
        <mat-header-cell *cdkHeaderCellDef mat-sort-header> File Type </mat-header-cell>
        <mat-cell *cdkCellDef="let row"> {{row.FileType}} </mat-cell>
      </ng-container>

      <!-- ChangeSponsor -->
      <ng-container cdkColumnDef="contentType">
        <mat-header-cell *cdkHeaderCellDef mat-sort-header> Content Type </mat-header-cell>
        <mat-cell *cdkCellDef="let row"> {{row.ContentType}} </mat-cell>
      </ng-container>

      <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *cdkRowDef="let row; columns: displayedColumns;" (click)="onClick(row.SerialNumber)">
      </mat-row>
    </mat-table>
  </div>
</div>

子组件

  @Input() changeId: number;
  @Input() fileType: string;
  @Output() downloadFile: EventEmitter<string> =
  new EventEmitter<string>();

  onClick(serialNumber: string): void {
    this.downloadFile.emit(serialNumber);
}

在父模板中调用子模板

<app-file-selector [changeId]="change.ChangeId" [fileType]="'Release Notes'" (downloadFile)='(downloadFile($event))'></app-file-selector>

downloadFiles 方法现在位于父组件中，服务方法移至父服务class。下面组件中的方法。

downloadFile(serialNumber: string): void {
    this.changeService.downloadFile(serialNumber);
  }

Angular -（点击）在我的 Material/CDK 数据表中没有触发

Angular - (click) not firing in my Material/CDK Datatable

angular-material

angular

angular-cdk