0

在我的模板中考虑下表

    <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 方法，然后调用服务类中的一个方法，该方法将文件发送到浏览器以供用户下载。但是，在上述任何尝试中，它都不起作用。所以我肯定错过了一些东西。

有人可以让我知道我错过了什么不让这项工作吗？

非常感谢您对此进行调查。

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

4

3 回答 3

0

有两次点击事件的理由吗？

 <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>
于 2017-11-21T14:23:13.707 回答
0

我在我的表格行中放了几个按钮。编辑与您的情况类似。

<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.');
              }
          );
  }
于 2017-11-21T15:56:44.793 回答
0

好的，我的问题确实是由于组件嵌套在父级中，所以为了让点击事件向上移动到父级，我需要通过@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);
  }
于 2017-11-21T19:12:27.157 回答