Question

我无法将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（）函数。然后它在视图中填充我的表，并使用编辑按钮构建每一行，其中类别id为最后的按钮ID。我正在做的是当用户单击编辑按钮时，触发categories.component.ts中的setMode（）函数并检索按钮ID并将模式和ID保存在服务中。查看编辑表单时将使用此模式（因为我使用它来创建和编辑相同的资源）该ID将用于向服务器请求资源。

错误：有时，当我点击编辑按钮时，它会导航到表单，但不会调用服务器来检索资源（我检查了Chrome中的网络标签）。我在setMode（）函数中控制了。记录了ID，并注意到有时它是未定义的，所以我认为我的问题不在于表单中。它是随机发生的，有时候我会点击编辑按钮5次然后它会起作用，下一次会给我一些未定义的，有时或多或少。所以我认为这可能是我的要求，但我不确定。

我已经尝试过：

将Observable改为承诺
直到数据才呈现列表从服务器检索（使用Observable和Promise）

Answer 1

您应该更改setMode()方法，以便它发送参数而不是事件，这将更容易管理。

setMode(mode, category_id)

如果在您的代码执行之前似乎出现了导航，您应该使用this.router.navigate([...])方法末尾的setMode()进行导航。

使用Angular 2动态分配HTML按钮ID

1 个答案: