Question

考虑我的模板中的下表

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

它在组件类中调用的方法

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

在上表中，我尝试创建一个调用downloadFile方法的（click）事件，然后调用该服务类中的一个方法，该方法将文件发送到浏览器供用户下载。但是，上述任何尝试都不起作用。所以我肯定错过了一些东西。

有人能让我知道我错过了哪些不让它发挥作用吗？

非常感谢您提前了解此事。

编辑：我被告知这可能是重要的信息，但这是一个儿童组件。

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

我在我的一个表行中放了几个按钮。编辑类似于你的情况。

<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

好的，我的问题确实是由于组件嵌套在父级中，所以为了让click事件向上移动到父级别，我需要通过@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方法现在位于父组件中，并且服务方法已移至父服务类。下面组件中的方法。

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

Angular - （单击）不在我的Material / CDK Datatable中触发

3 个答案: