使用Angular 2動態分配HTML按鈕ID

我無法將ID屬性分配給某些HTML按鈕。使用Angular 2動態分配HTML按鈕ID

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（）函數從服務器檢索數據。然後它在視圖中填充我的表格，並用編輯按鈕構建每行，並在末尾帶有類別ID作爲按鈕ID。我正在做的是當用戶點擊編輯按鈕時，觸發categories.component.ts中的setMode（）函數並檢索按鈕ID並將模式和ID保存在服務中。查看編輯表單時將使用此模式（因爲我使用它來創建和編輯同一資源）ID將用於向服務器請求資源。

錯誤：有時，當我點擊編輯按鈕時，它會導航到表單，但不會調用服務器來檢索資源（我在Chrome中檢查了網絡選項卡）。我console.log在setMode（）函數中的ID，並注意到有時它是不確定的，所以我不認爲我的問題是在形式。它隨機發生，有時我點擊編輯按鈕5次，它的作品，下一個給我不確定，有時或多或少。所以我認爲這可能與我的要求有關，但我不確定。

我已經嘗試過：

更改可觀察到無極
直到從服務器檢索的數據不渲染列表（使用可觀察和承諾）

來源

2017-08-08 salsadeanguila

不是真的有關係，但是有沒有理由不要'setMode（category.id）'？另外，如果導航看起來太早了，爲什麼不通過setMode方法末尾的代碼進行導航？ – Ploppy

@Ploppy在setMode中，我傳遞了事件對象，在那裏我正在檢索「名稱」和「標識」屬性，但你只是給了我一個主意。我將嘗試您通過代碼進行導航的建議。 – salsadeanguila

@Ploppy我將setMode中的參數更改爲'setMode（mode，category_id）'而不是'$ event'，現在它按預期工作。也改變了導航，如你所建議，它的工作。我不記得我爲什麼選擇使用'$ event'。你能寫一個答案，所以我可以把它標記爲正確的嗎？ – salsadeanguila

你應該改變您的setMode()方法，以便它發送參數而不是事件，這將更容易管理。

setMode(mode, category_id)

如果導航似乎出現在您的代碼執行之前，您應該導航在你setMode()方法結束使用this.router.navigate([...])。

來源

2017-08-10 17:51:50 Ploppy

這解決了我的問題，謝謝！ – salsadeanguila

使用Angular 2動態分配HTML按鈕ID

回答

相關問題