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

Я думаю, вы должны использовать интерфейс для переменной variableAnnouncement. Вы можете проверить этот пример https://stackblitz.com/edit/angular-cgsfcg