Angular 6 - 获取点击切换按钮的行数据

Question

我需要点击特定的切换按钮获取row细节。

下面是我的HTML代码

<div class="container">
  <div>
    <h3>Manage Announcements</h3>
  </div>
  <div>
    <table mat-table [dataSource]="announcementsDataSource" class="mat-elevation-z8">
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

      <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef> Title</th>
        <td mat-cell *matCellDef="let element"> {{element.announcementTitle}}</td>
      </ng-container>

      <ng-container matColumnDef="text">
        <th mat-header-cell *matHeaderCellDef> Text</th>
        <td mat-cell *matCellDef="let element"> {{element.announcementText}}</td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef> Type</th>
        <td mat-cell *matCellDef="let element"> {{element.announcementType}}</td>
      </ng-container>

      <ng-container matColumnDef="for">
        <th mat-header-cell *matHeaderCellDef> For</th>
        <td mat-cell *matCellDef="let element"> {{element.announcementFor}}</td>
      </ng-container>

      <ng-container matColumnDef="fromDate">
        <th mat-header-cell *matHeaderCellDef> From date</th>
        <td mat-cell *matCellDef="let element"> {{element.announcementFromDate | date: 'dd/MM/yyyy'}}</td>
      </ng-container>

      <ng-container matColumnDef="toDate">
        <th mat-header-cell *matHeaderCellDef> To date</th>
        <td mat-cell *matCellDef="let element"> {{element.announcementToDate | date: 'dd/MM/yyyy'}}</td>
      </ng-container>

      <ng-container matColumnDef="createdBy">
        <th mat-header-cell *matHeaderCellDef> Created ID</th>
        <td mat-cell *matCellDef="let element"> {{element.createdCdsId}}</td>
      </ng-container>

      <ng-container matColumnDef="updatedBy">
        <th mat-header-cell *matHeaderCellDef> Updated ID</th>
        <td mat-cell *matCellDef="let element"> {{element.updatedCdsId}}</td>
      </ng-container>

      <ng-container matColumnDef="createdDate">
        <th mat-header-cell *matHeaderCellDef> Created On</th>
        <td mat-cell *matCellDef="let element"> {{element.createdDate | date: 'dd/MM/yyyy'}}</td>
      </ng-container>

      <ng-container matColumnDef="lastModifiedDate">
        <th mat-header-cell *matHeaderCellDef> Last Modified On</th>
        <td mat-cell *matCellDef="let element"> {{element.lastModifiedDate | date: 'dd/MM/yyyy'}}</td>
      </ng-container>

      <ng-container matColumnDef="displayOn">
        <th mat-header-cell *matHeaderCellDef> Display</th>
        <td mat-cell *matCellDef="let element">
          <mat-slide-toggle [checked]="element.isDisplayOn" (change)="displayModified($event,element)" ></mat-slide-toggle>
        </td>
      </ng-container>


    </table>
  </div>
</div>

下面是我的Typescript代码

export class AnnouncementManageComponent implements OnInit {

  announcementsDataSource: AnnouncementResponse[];
  displayedColumns: string[] = ['title', 'text', 'type', 'for','fromDate','toDate','createdBy','updatedBy','createdDate','lastModifiedDate','displayOn'];

  constructor(private announcementManageService: AnnouncementManageService,
              private announcementRetrieveService: AnnouncementRetrieveService) {

  }

  ngOnInit() {
    this.announcementRetrieveService.getAllAnnouncements().then(announcements => {
      this.announcementsDataSource = announcements.announcements;
    });
  }

  displayModified(event: MatSlideToggleChange, modifiedAnnouncement:any) {
    console.log(event.checked);
    console.log(modifiedAnnouncement.title);
    console.log(modifiedAnnouncement.text);
    console.log(modifiedAnnouncement.displayOn);
  }

上面console函数中的所有displayModified语句都打印为undefined

true
undefined
undefined
undefined

我想得到整行数据。怎么做 ？

Answer 1

试试以下代码：

1.只需在切换按钮中添加以下功能

(click)="rowData(element)"

2.在ts文件中添加以下代码

taskView(selectedItem: any){
 var dataObj= JSON.stringify(selectedItem)

      var obj=JSON.parse(dataObj);
console.log(obj)
}

Answer 2

我认为你必须使用interfaceAndnouncement变量。你可以查看这个例子https://stackblitz.com/edit/angular-cgsfcg