HTML-Schaltflächen-ID dynamisch zuweisen mit Angular 2

Question

Ich habe Probleme, das ID-Attribut einigen HTML-Schaltflächen zuzuweisen.

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> 

Erläuterung: Wenn "/ categories" geladen wird, wird die Funktion getCategories() ausgelöst, die Daten vom Server abruft. Dann füllt es meine Tabelle in der Ansicht auf und erstellt jede Zeile mit einer Bearbeitungsschaltfläche mit der Kategorie-ID als Schaltflächen-ID am Ende. Was ich mache ist, wenn der Benutzer auf die Schaltfläche Bearbeiten klickt, die Funktion setMode() in categories.component.ts auslöst und die ID der Schaltfläche abruft und den Modus und die ID im Service speichert. Dieser Modus wird verwendet, wenn das Bearbeitungsformular angezeigt wird (weil ich es zum Erstellen und Bearbeiten derselben Ressource verwende). Die ID wird zum Anfordern der Ressource an den Server verwendet.

Fehler: Manchmal, wenn ich auf die Schaltfläche Bearbeiten klicke, navigiert es zum Formular, aber ruft nicht den Server auf, um die Ressource abzurufen (ich habe die Netzwerkregisterkarte in Chrome überprüft). Ich console.logged die ID in der Funktion setMode() und bemerkte, dass es manchmal nicht definiert ist, so glaube ich nicht, dass mein Problem in dem Formular ist. Es passiert zufällig, manchmal klicke ich 5 mal auf den Bearbeiten-Knopf und es funktioniert und der nächste gibt mir undefiniert und manchmal mehr oder weniger. Ich denke also, es könnte etwas mit meinen Anfragen sein, aber ich bin mir nicht sicher.

Was ich schon versucht:

• Ändern beobachtbare
• Nicht die Liste Rendering-to-Promise, bis die Daten vom Server abgerufen wird (beobachtbare und Versprechen mit)

Answer 1

Sie sollten ändern Ihre Methode, so dass es die Parameter anstelle des Ereignisses sendet, wäre es einfacher zu verwalten.

setMode(mode, category_id) 

Wenn Navigation zu angezeigt scheint, bevor der Code ausgeführt wird, sollten Sie die Verwendung this.router.navigate([...]) am Ende Ihres setMode() Methode navigieren.