Отправка идентификатора методу нажатием кнопки в таблице материалов в Angular

Question

У меня есть следующая таблица материалов. Код для "Действие" приведен ниже:

    <ng-container matColumnDef="Action">
      <th mat-header-cell *matHeaderCellDef> Action</th>
        <td mat-cell *matCellDef="let element">
          <i class="material-icons mat-icon-button" (click)="greeting(element)">open_in_new</i> </td>
  </ng-container>

Каждая строка этой таблицы имеет связанный Special_Id в базе данных, который я получаю через вызов GET REST вместе со всеми этими данными, но не отображается в пользовательском интерфейсе и, следовательно, не является частью столбца этой таблицы материалов.

Код интерфейса следующий:

export interface PeriodicElement {
  special_id:string;
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

код для столбца таблицы материалов:

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol','Action'];

При нажатии кнопки действия, соответствующей каждой строке, вызывается приветствие метода (элемент). Моя задача - передать Special_Id в качестве параметра методу welcome. Как я могу этого добиться? AngularJS для меня новичок, и я не могу понять, как это сделать.

Answer 1

Несмотря на то, что special_id не является частью массива столбцов, вашим элементом является объект, имеющий это поле. Таким образом, вы можете напрямую передать его в качестве аргумента, и ваш идентификатор будет передан методу. Просто вызовите приветствие (element.special_id)

Answer 2

Ты пробовал:

<ng-container matColumnDef="Action">
  <th mat-header-cell *matHeaderCellDef> Action</th>
  <td mat-cell *matCellDef="let element">
    <i class="material-icons mat-icon-button" 
       (click)="greeting(element.special_id)">
      open_in_new
    </i> 
  </td>
</ng-container>

Вы также можете установить ссылку в строке

<ng-container matColumnDef="Action">
  <th mat-header-cell *matHeaderCellDef> Action</th>
  <td mat-cell *matCellDef="let element" (click)="greeting(element.special_id)">
    <i class="material-icons mat-icon-button">
      open_in_new
    </i> 
  </td>
</ng-container>