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

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>
  

  回复于 2024-05-07T10:25:58+08:00
• 0

  好吧，我的问题确实是由于组件嵌套在父级中，所以为了让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);
    }
  

  回复于 2024-05-07T10:25:58+08:00
• 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.');
                }
            );
    }
  

  回复于 2024-05-07T10:25:58+08:00