У меня возникли проблемы с назначением атрибута 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 раз, и это работает, а следующее дает мне неопределенное, а иногда и более или менее. Поэтому я думаю, что это может быть что-то с моими запросами, но я не уверен.
Я уже пробовал:
Вы должны изменить свой setMode()
чтобы он отправлял параметры вместо события, было бы проще управлять.
setMode(mode, category_id)
Если навигация, кажется, появляется перед выполнением кода, вы должны перейти с помощью this.router.navigate([...])
в конце вашего метода setMode()
.
setMode(category.id)
? Кроме того, если навигация кажется слишком ранней, почему бы не перейти с помощью кода в конце метода setMode?