Присваивать идентификатор кнопки HTML динамически, используя Angular 2

У меня возникли проблемы с назначением атрибута ID некоторым кнопкам HTML.

categories.service.ts:

getCategories(): Observable<Category[]> {
    let headers = new Headers({ 'Authorization': this.authenticationService.token });
    let options = new RequestOptions({ headers: headers });

    return this.http.get(this.categoriesURL, options)
      .map((response: Response) => response.json());
  }

categories.component.ts:

import { Component, OnInit } from '@angular/core';

import { Category } from '../../_models/category';
import { CategoriesService } from '../../_services/categories.service';

@Component({
  selector: 'app-categories',
  templateUrl: './categories.component.html',
  styleUrls: ['./categories.component.css']
})
export class CategoriesList implements OnInit {
  categories: Category[] = [];

  constructor(private categoriesService: CategoriesService) { }

  ngOnInit() {
    // Limpia el mode
    this.categoriesService.clearMode();
    // Lista de categorías
    this.categoriesService.getCategories()
        .subscribe(categories => {
          this.categories = categories;
        });
  }

  setMode(event){
    this.categoriesService.setMode(event.target["name"], event.target["id"]);
  }

}

categories.component.html:

<div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="content">
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Nombre</th>
                  <th>Descripción</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let category of categories">
                  <td>{{category.name}}</td>
                  <td>{{category.description}}</td>
                  <td><button (click)="setMode($event)" routerLink="/categories/form" type="button" name="editando" id="{{category.id}}" class="btn btn-info"><i class="ti-pencil-alt"></i> Editar</button></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

Объяснение: Когда загружается "/categories", запускается функция getCategories(), которая извлекает данные с сервера. Затем он заполняет мою таблицу в представлении и строит каждую строку с кнопкой редактирования с идентификатором категории в качестве идентификатора кнопки в конце. То, что я делаю, - это когда пользователь нажимает кнопку редактирования, запускает функцию setMode() в category.component.ts и извлекает идентификатор кнопки и сохраняет режим и идентификатор в службе. Этот режим будет использоваться при просмотре формы редактирования (потому что я использую ее для создания и редактирования одного и того же ресурса). ID будет использоваться для запроса ресурса на сервер.

Ошибка. Иногда, когда я нажимаю кнопку редактирования, она переходит в форму, но не вызывает вызов сервера для извлечения ресурса (я проверил вкладку сети в Chrome). Я console.logged ID в функции setMode() и заметил, что иногда он не определен, поэтому я не думаю, что моя проблема в форме. Это случается случайным образом, иногда я нажимаю кнопку редактирования 5 раз, и это работает, а следующее дает мне неопределенное, а иногда и более или менее. Поэтому я думаю, что это может быть что-то с моими запросами, но я не уверен.

Я уже пробовал:

• Изменение наблюдаемого к обещанию
• Не показывать список до тех пор, пока данные не будут получены с сервера (используя Observable and Promise)