Question

我有几个用户。单击用户，应用程序将显示一个包含该用户及其钱包的新页面。该页面上的一个按钮允许我创建链接到用户的新钱包（显示一个新页面）。问题是，当我创建钱包时，它与用户无关。钱包在数据库中创建，但是用户不确定创建的钱包。我想将用户链接到创建的钱包。你可以帮帮我吗。谢谢

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);
  }

}

Answer 1

在保存方法中，您需要先设置用户，然后再调用service.createWallet，例如-

save() {
    this.wallet.user = this.user; // get user and set the user to wallet here. 
    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);
        }
      );

我想将用户链接到创建的钱包（角度）

1 个答案: