Angular 6 - 单击切换按钮获取行数据答案

【问题标题】：Angular 6 - Get row data on click on toggle buttonAngular 6 - 单击切换按钮获取行数据
【发布时间】：2019-09-11 12:39:11
【问题描述】：

我需要在单击该特定切换按钮时获取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);
  }

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

true
undefined
undefined
undefined

我想获取整行数据。该怎么做？

【问题讨论】：

您是指每个<mat-row> 中的行详细信息吗？
不确定是否这样做。我在上面粘贴了我的整个html 代码
尝试 console.log(modifiedAnnouncement) 一次，看看 modifiedAnnouncement 包的结果。
super ...我明白了..它现在正在打印实际对象。非常感谢

标签： angular typescript angular-material angular6

【解决方案1】：

试试下面的代码：

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

(click)="rowData(element)"

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：