У меня есть небольшое веб-приложение с списком пожеланий.Добавление предметов работает.Однако при вызове операции удаления Angular, похоже, не ожидает ответа (не вызывается ни успешный, ни неудачный обратный вызов).Вместо этого angular переходит к корню приложения.
Я определил следующую угловую службу:
import {Item} from '../shared/Item.model';
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
@Injectable()
export class UserService {
baseUrl: String = 'http://localhost:8080/';
constructor(private httpClient: HttpClient) {
}
addWishListItem(userId: string, itemToAdd: Item) {
return this.httpClient.post(this.baseUrl + '/rest/person/private/' + userId + '/wishlist', itemToAdd);
}
removeWishListItem(userId: string, itemToRemove: Item) {
return this.httpClient.delete(this.baseUrl + '/rest/person/private/' + userId + '/wishlist/' + itemToRemove.id);
}
}
Компонент, вызывающий службу, выглядит следующим образом:
import { Component, OnInit } from '@angular/core';
import {Item} from '../shared/Item.model';
import {UserService} from './user.service';
import {ActivatedRoute, Router} from '@angular/router';
import {User} from '../shared/User.model';
@Component({
selector: 'app-wishlist',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css'],
providers: [UserService]
})
export class UserComponent implements OnInit {
user: User;
constructor(private userService: UserService,
private route: ActivatedRoute,
private router: Router) { }
ngOnInit() {
this.userService.getUser(this.route.snapshot.params['id'], false).subscribe(
(user: User) => {
this.user = user;
if (this.user === undefined) {
this.router.navigate(['notfound']);
}
}
);
}
onItemAdded(itemData: Item) {
this.userService.addWishListItem(this.user.privateId, itemData).subscribe(
(user: User) => {
this.user = user;
}
);
}
onItemRemoved(itemData: Item) {
const oldId = this.user.privateId;
this.userService.removeWishListItem(this.user.privateId, itemData).subscribe(
(response) => {console.log('Hehe'); },
(error) => {console.log('oops'); }
);
}
}
Ни один из двух обратных вызовов не выполняется.Фактическая операция удаления вызывается на бэкэнде (я могу сломать там).Для завершения, вот служба (весенняя загрузка / kotlin), вызываемая угловым компонентом:
@RestController
@RequestMapping("/rest/person")
class PersonEndpoint(
private val personRepository: PersonRepository,
private val personWithPrivateIdToFactory: PersonWithPrivateIdToFactory,
private val wislistItemDomainFactory: WishListItemDomainFactory
) {
/**
* Adds a wishlistitem to a user if that user exists and returns the updated user.
*/
@CrossOrigin(origins = ["http://localhost:4200"])
@PostMapping("/private/{id}/wishlist")
@Transactional
fun addWishlistItem(@PathVariable("id") privateId: UUID,
@RequestBody item: WishlistItemTo): PersonWithPrivateIdTo {
val person = personRepository.findByPrivateId(privateId);
if (person != null) {
person.addItem(wislistItemDomainFactory.toDomain(item))
return personWithPrivateIdToFactory.toTo(personRepository.save(person))
} else {
throw NotFoundException("No such user found.");
}
}
/**
* Adds a wishlistitem to a user if that user exists and returns the updated user.
*/
@CrossOrigin(origins = ["http://localhost:4200"])
@DeleteMapping("/private/{id}/wishlist/{itemId}")
@Transactional
fun removeWishlistItem(@PathVariable("id") privateId: UUID,
@PathVariable("itemId") itemToRemove: Long) {
val person = personRepository.findByPrivateId(privateId);
if (person != null) {
person.removeItemById(itemToRemove)
personRepository.save(person)
} else {
throw NotFoundException("No such user found.");
}
}
}
Добавление работает отлично: обновленный пользователь возвращается и отображается на экране.Сначала я хотел, чтобы удаление работало аналогичным образом (возвращая обновленного пользователя), но в настоящее время я удалил его, поскольку я думал, что тело операции удаления, вероятно, было проигнорировано Spring Boot или angular.Однако мне нужно было бы отреагировать на завершение операции удаления, чтобы перезагрузить пользователя.
Редактировать:
Поскольку html был запрошен, вот HTML-код пользовательского компонента:
<div class="wishlisttitle">Wishlist of {{user?.name}}</div>
<app-wishlist-edit
(itemAdded)="onItemAdded($event)"
class="submargin"></app-wishlist-edit>
<div *ngIf="user !== undefined">
<div *ngIf="user.wishlist.items.length == 0 &&" class="topmargin">Empty. Please add elements.</div>
<app-wishlist-item
*ngFor="let item of user.wishlist.items"
[wishListItem]="item"
(itemRemoved)="onItemRemoved($event)"
></app-wishlist-item>
</div>
Вот HTML-код компонента элемента списка желаний:
<div class="container">
<div class="row">
<div class="col-sm">
<div class="card bg-light border-dark">
<div class="card-body">
<h5 class="card-title">{{item.name}}</h5>
<p class="card-text"><a href="{{item.url}}">{{item.url}}</a></p>
<a href="#" class="btn btn-danger" (click)="onRemoveClicked()">Remove Item</a>
</div>
</div>
</div>
</div>
</div>
И для редактирования:
<div class="container">
<div class="row">
<div class="col-md-5">
<label for="name"><i>Item (Short description)</i></label>
<input [(ngModel)]="itemName" type="text" id="name" class="form-control">
</div>
<div class="col-md-5">
<label for="url"><i>Link</i></label>
<input [(ngModel)]="itemLink" type="number" class="form-control" id="url">
</div>
<div class="col-md-2 align-self-end">
<button class="btn btn-success" (click)="onSubmit()">Add</button>
</div>
</div>
</div>
Редактировать:
Проблема заключается врешено: это было то, что явно вызвало навигацию.После изменения проблема была быстро решена.
Есть предложения?Большое спасибо.