【发布时间】：2018-12-19 17:14:30
【问题描述】：
我有几个用户。单击用户，应用程序会显示一个包含用户及其钱包的新页面。此页面中的一个按钮允许我创建链接到用户的新钱包（显示一个新页面）。问题是当我创建一个钱包时，它与用户无关。钱包是在数据库中创建的，但创建的钱包的用户是不确定的。我想将用户链接到创建的钱包。你可以帮帮我吗。谢谢
UsersListComponent 显示我的用户：
UsersListComponent.ts
export class UsersListComponent implements OnInit {
users: User[];
constructor(private dataService: DataService, private router: Router) { }
ngOnInit() {
this.reloadData();
}
reloadData() {
this.dataService.getUsers().subscribe(
(users: User[]) => {
console.log(users);
this.users = users;
}
);
}
newUser() {
this.router.navigate(['/user', 'new']);
}
deleteUser(id: number) {
this.dataService.deleteUser(id);
}
viewUser(id: number) {
this.router.navigate(['/users', 'view', id]);
}
}
UsersListComponent.HTML
<div class="row">
<div class="col-xs-12">
<h2>Users</h2>
<div class="list-group">
<button class="list-group-item"
*ngFor="let user of users; let i = index"
(click)="viewUser(i+1)">
<h3 class="list-group-item-heading">
{{user.name}}
<button class="btn btn-primary pull-right"(click)="deleteUser()">
<span class="glyphicon glyphicon-minus"></span>
</button>
</h3>
</button>
</div>
<button class="btn btn-primary" (click)="newUser()">New User</button>
</div>
</div>
SingleUserComponent 显示有钱包的用户：
SingleUserComponen.ts
export class SingleUserComponent implements OnInit {
user: User = new User();
constructor(private route: ActivatedRoute,
private dataService: DataService,
private router: Router) { }
ngOnInit() {
// Recuperation de l'identifiant depuis l'url
const id = this.route.snapshot.params['id'];
this.dataService.getUserWithWallets(+id).subscribe(
(user: User) => {
this.user = user;
console.log('user: ', user);
}
);
// this.getWallets();
}
getUserByName() {
this.dataService.getUserByName(this.user.name).subscribe(
user => {
this.user = user as User;
this.user.name = user.name;
}
);
}
/* viewWallet(id: number) {
this.router.navigate(['/wallets']);
}*/
onBack() {
this.router.navigate(['/users']);
}
SingleUserComponen.HTML
<div class="row">
<div class="container">
<div class="panel-primary" >
<h1 class="panel panel-heading">
{{user.name}}
</h1>
<div class="panel-body">
<ul class="list-group-item">
<li *ngFor="let wallet of user.wallets" style="list-style: none">
<h3>
{{wallet.name}}
</h3>
</li>
</ul>
</div>
<button routerLink="/wallets" class="btn btn-primary active"
role="button"
routerLinkActive="active">Create New Wallet</button><br>
<button class="btn btn-default spacer" (click)="onBack()">Back</button>
</div>
</div>
</div>
在开始时使用用户选择创建一个钱包
WalletFormComponent.ts
export class WalletFormComponent implements OnInit {
selectedWallet: Wallet;*/
wallet: Wallet = new Wallet();
user: Observable<User> ;
submitted = false;
constructor(private dataService: DataService,
private route: ActivatedRoute,
private router: Router,
private sigleUserComponent: SingleUserComponent
) { }
ngOnInit() {
/* this.dataService.getWallets().subscribe(
(wallets: Wallet[]) => {
console.log('wallets: ', wallets);
this.wallets = wallets;
}
);*/
}
newWallet(): void {
this.submitted = false;
this.wallet = new Wallet();
}
/* getUser() {
this.user = this.dataService.getUserByName(this.sigleUserComponent.user.name);
}*/
save() {
this.dataService.createWallet(this.wallet)
.subscribe(
wallet => {
this.wallet = wallet as Wallet;
// this.user.wallets.push(this.wallet);
console.log(wallet);
console.log(this.user);
// console.log(this.getUser());
}, error1 => {
console.log(error1);
}
);
this.wallet = new Wallet();
}
onSubmit() {
this.submitted = true;
this.save();
// this.router.navigate(['/users/view/:id']);
}
}
WalletFormComponent.html
<h2>Create Wallet</h2>
<div [hidden]="submitted" style="width: 300px;">
<form (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="name"> Name </label>
<input type="text" class="form-group" id="name" required
[(ngModel)]="wallet.name" name="name">
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
<div [hidden]="!submitted">
<h4>You submitted successfully!</h4>
<button class="btn btn-success" (click)="newWallet()">Add</button>
</div>
服务
data.service.ts
export class DataService {
constructor(private http: HttpClient) { }
getUsers() {
return this.http.get( 'http://localhost:8080/users');
}
getUserWithWallets(id: number) {
return this.http.get('http://localhost:8080/users/' + id);
}
getUserByName(name: string): Observable<any> {
return this.http.get('http://localhost:8080/users/name/' + name);
}
getWallets() {
return this.http.get( 'http://localhost:8080/wallets');
}
getWallet(id: number) {
return this.http.get('http://localhost:8080/wallets/' + id);
}
createWallet(wallet: Wallet) {
const dto = {
name: wallet.name,
user: wallet.user
}
return this.http.post('http://localhost:8080/wallets/', dto);
}
createUser(user: User) {
return this.http.post('http://localhost:8080/users/', user.name);
}
deleteUser(id: number) {
return this.http.delete('http://localhost:8080/users/' + id);
}
deleteWallet(id: number) {
return this.http.delete('http://localhost:8080/wallets/' + id);
}
}
【问题讨论】：
标签： angular spring-boot spring-data-jpa