堆棧內存溢出
  簡體   English   中英

Angular 示例多對一和一對多

[英]Angular Example Many-To-One and One-To-Many

 原文  2020-08-19 09:03:07  9   1    java/ angular/ spring-boot

問題描述

我試圖在 Angular 中建立多對一關系，基於 Spring Boot 中的 Java 類，如下所示：

用戶.class

public class User implements Serializable, UserDetails {

    @Id
    @GeneratedValue(generator = "uuid")
    @GenericGenerator(name = "uuid", strategy = "uuid2")
    @Size(max = 36)
    @Column(name = "userId")
    private String userId;

    @JoinColumn(name = "accountId", referencedColumnName = "accountId", nullable = false)
    @ManyToOne(fetch = FetchType.LAZY, cascade = CascadeType.ALL)
    @JsonInclude(JsonInclude.Include.NON_NULL)
    private Account account;

    @Column(name = "userName")
    private String userName;

    @Column(name = "emailAddress")
    private String emailAddress;

    @Column(name = "password")
    private String password;
...
}

帳戶.class

public class Account implements Serializable {

    @Id
    @GeneratedValue(generator = "uuid")
    @GenericGenerator(name = "uuid", strategy = "uuid2")
    @Size(max = 36)
    @Column(name = "accountId")
    private String accountId;

    @Column(name = "accountName")
    private String accountName;

    @Column(name = "company")
    private String company;

    @Column(name = "address")
    private String address;

    @Column(name = "emailAddress")
    private String emailAddress;

    @Column(name = "dicomId")
    private String dicomId;

    @Column(name = "enabled")
    @ColumnDefault(value = "1")
    private Integer enabled;

    @OneToMany (mappedBy = "account",
                cascade = CascadeType.ALL,
                orphanRemoval = true)
    Set<User> users = new HashSet<>();
...
}

我遵循了本教程： https://www.techgeeknext.com/spring/angular-spring-boot-jwt-authentication ，到目前為止我有這段代碼：

HttpClientService.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

export class Account {
  constructor(
    public accountId: string,
    public accountName: string,
    public company: string,
    public address: string,
    public emailAddress: string,
    public dicomId: string,
    public enabled: number
  ) {}
}

export class User {
  constructor(
    public userId: string,
    public account: Account,
    public userName: string,
    public emailAddress: string,
    public password: string,
    public enabled: number,
    public lastLogin: number
  ) {}
}

@Injectable({
  providedIn: 'root'
})
export class HttpClientService {
  constructor(private httpClient: HttpClient) {}

  getAccounts() {
    return this.httpClient.get<Account[]>('http://localhost:9898/api/v1/accountmanage/accounts');
  }

  public deleteAccount(account) {
    return this.httpClient.delete<User>(
      'http://localhost:9898/api/v1/accountmanage/account' + '/' + account.accountId
    );
  }

  public createAccount(account) {
    return this.httpClient.post<Account>(
      'http://localhost:9898/api/v1/accountmanage/account',
      account
    );
  }

  getUsers() {
    return this.httpClient.get<User[]>('http://localhost:9898/api/v1/usermanage/users');
  }

  public deleteUser(user) {
    return this.httpClient.delete<User>(
      'http://localhost:9898/api/v1/usermanage/user' + '/' + user.userId
    );
  }

  public createUser(user) {
    return this.httpClient.post<User>(
      'http://localhost:9898/api/v1/usermanage/user',
      user
    );
  }
}

用戶組件.ts

import { Component, OnInit } from '@angular/core';
import { HttpClientService, User, Account } from "../service/httpclient.service";

@Component({
  selector: "app-user",
  templateUrl: "./user.component.html",
  styleUrls: ["./user.component.less"]
})
export class UserComponent implements OnInit {
  users: User[];
  displayedColumns: string[] = ["userId", "accountId", "userName", "emailAddress", "password", "enabled", "lastLogin", "delete"];

  constructor(private httpClientService: HttpClientService) {}

  ngOnInit() {
    this.httpClientService
      .getUsers()
      .subscribe(response => this.handleSuccessfulResponse(response));
  }

  handleSuccessfulResponse(response) {
    this.users = response;
  }

  deleteUser(user: User): void {
    this.httpClientService.deleteUser(user).subscribe(data => {
      this.users = this.users.filter(u => u !== user);
    });
  }
}

AccountComponent.ts

import { Component, OnInit } from '@angular/core';
import { HttpClientService, Account } from "../service/httpclient.service";

@Component({
  selector: "app-account",
  templateUrl: "./account.component.html",
  styleUrls: ["./account.component.less"]
})
export class AccountComponent implements OnInit {
  accounts: Account[];
  displayedColumns: string[] = ["accountId", "accountName", "company", "address", "emailAddress", "dicomId", "enabled", "delete"];

  constructor(private httpClientService: HttpClientService) {}

  ngOnInit() {
    this.httpClientService
      .getAccounts()
      .subscribe(response => this.handleSuccessfulResponse(response));
  }

  handleSuccessfulResponse(response) {
    this.accounts = response;
  }

  deleteAccount(account: Account): void {
    this.httpClientService.deleteAccount(account).subscribe(data => {
      this.accounts = this.accounts.filter(u => u !== account);
    });
  }
}

AddAccountComponent.ts

import { Component, OnInit } from "@angular/core";
import { HttpClientService, Account } from "../service/httpclient.service";
import { Router } from '@angular/router';

@Component({
  selector: "app-add-account",
  templateUrl: "./add-account.component.html",
  styleUrls: ["./add-account.component.less"]
})
export class AddAccountComponent implements OnInit {
  account: Account = new Account("","","","","","",0);

  constructor(private httpClientService: HttpClientService,
              private router: Router) {}

  ngOnInit() {}

  createAccount(): void {
    console.debug(this.account);
    this.httpClientService.createAccount(this.account).subscribe(data => {
      alert("Account created successfully.");
      this.router.navigate([''])
    });
  }
}

添加用戶組件.ts

import { Component, OnInit } from '@angular/core';
import {HttpClientService, User, Account} from '../service/httpclient.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-add-user',
  templateUrl: './add-user.component.html',
  styleUrls: ['./add-user.component.less']
})
export class AddUserComponent implements OnInit {
  user: User = new User(null, null,
    null, "","",0,0);

  constructor(private httpClientService: HttpClientService,
              private router: Router) {}

  ngOnInit() {}

  createUser(): void {
    console.debug(this.user);
    this.httpClientService.createUser(this.user).subscribe(data => {
      alert('User created successfully.');
      this.router.navigate(['']);
    });
  }
}

Similar questions I can find: Angular 5: select all users with related role OneToMany Relationship Angularjs + Spring jpa repository Many-to-one field is not saving

這是編譯器的結果：

Angular Windows 上的編譯器

請哪位志願者幫我解決這個問題？ 提前致謝： ：）

1 個解決方案

解決方案1
 0 已采納  2020-09-29 19:05:05

我試圖在 Angular 中建立多對一關系，基於 Spring Boot 中的 Java 類，如下所示：

用戶.class

public class User implements Serializable, UserDetails {

    @Id
    @GeneratedValue(generator = "uuid")
    @GenericGenerator(name = "uuid", strategy = "uuid2")
    @Size(max = 36)
    @Column(name = "userId")
    private String userId;

    @JoinColumn(name = "accountId", referencedColumnName = "accountId", nullable = false)
    @ManyToOne(fetch = FetchType.LAZY, cascade = CascadeType.ALL)
    @JsonInclude(JsonInclude.Include.NON_NULL)
    private Account account;

    @Column(name = "userName")
    private String userName;

    @Column(name = "emailAddress")
    private String emailAddress;

    @Column(name = "password")
    private String password;
...
}

帳戶.class

public class Account implements Serializable {

    @Id
    @GeneratedValue(generator = "uuid")
    @GenericGenerator(name = "uuid", strategy = "uuid2")
    @Size(max = 36)
    @Column(name = "accountId")
    private String accountId;

    @Column(name = "accountName")
    private String accountName;

    @Column(name = "company")
    private String company;

    @Column(name = "address")
    private String address;

    @Column(name = "emailAddress")
    private String emailAddress;

    @Column(name = "dicomId")
    private String dicomId;

    @Column(name = "enabled")
    @ColumnDefault(value = "1")
    private Integer enabled;

    @OneToMany (mappedBy = "account",
                cascade = CascadeType.ALL,
                orphanRemoval = true)
    Set<User> users = new HashSet<>();
...
}

我遵循了本教程： https://www.techgeeknext.com/spring/angular-spring-boot-jwt-authentication ，到目前為止我有這段代碼：

HttpClientService.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

export class Account {
  constructor(
    public accountId: string,
    public accountName: string,
    public company: string,
    public address: string,
    public emailAddress: string,
    public dicomId: string,
    public enabled: number
  ) {}
}

export class User {
  constructor(
    public userId: string,
    public account: Account,
    public userName: string,
    public emailAddress: string,
    public password: string,
    public enabled: number,
    public lastLogin: number
  ) {}
}

@Injectable({
  providedIn: 'root'
})
export class HttpClientService {
  constructor(private httpClient: HttpClient) {}

  getAccounts() {
    return this.httpClient.get<Account[]>('http://localhost:9898/api/v1/accountmanage/accounts');
  }

  public deleteAccount(account) {
    return this.httpClient.delete<User>(
      'http://localhost:9898/api/v1/accountmanage/account' + '/' + account.accountId
    );
  }

  public createAccount(account) {
    return this.httpClient.post<Account>(
      'http://localhost:9898/api/v1/accountmanage/account',
      account
    );
  }

  getUsers() {
    return this.httpClient.get<User[]>('http://localhost:9898/api/v1/usermanage/users');
  }

  public deleteUser(user) {
    return this.httpClient.delete<User>(
      'http://localhost:9898/api/v1/usermanage/user' + '/' + user.userId
    );
  }

  public createUser(user) {
    return this.httpClient.post<User>(
      'http://localhost:9898/api/v1/usermanage/user',
      user
    );
  }
}

用戶組件.ts

import { Component, OnInit } from '@angular/core';
import { HttpClientService, User, Account } from "../service/httpclient.service";

@Component({
  selector: "app-user",
  templateUrl: "./user.component.html",
  styleUrls: ["./user.component.less"]
})
export class UserComponent implements OnInit {
  users: User[];
  displayedColumns: string[] = ["userId", "accountId", "userName", "emailAddress", "password", "enabled", "lastLogin", "delete"];

  constructor(private httpClientService: HttpClientService) {}

  ngOnInit() {
    this.httpClientService
      .getUsers()
      .subscribe(response => this.handleSuccessfulResponse(response));
  }

  handleSuccessfulResponse(response) {
    this.users = response;
  }

  deleteUser(user: User): void {
    this.httpClientService.deleteUser(user).subscribe(data => {
      this.users = this.users.filter(u => u !== user);
    });
  }
}

AccountComponent.ts

import { Component, OnInit } from '@angular/core';
import { HttpClientService, Account } from "../service/httpclient.service";

@Component({
  selector: "app-account",
  templateUrl: "./account.component.html",
  styleUrls: ["./account.component.less"]
})
export class AccountComponent implements OnInit {
  accounts: Account[];
  displayedColumns: string[] = ["accountId", "accountName", "company", "address", "emailAddress", "dicomId", "enabled", "delete"];

  constructor(private httpClientService: HttpClientService) {}

  ngOnInit() {
    this.httpClientService
      .getAccounts()
      .subscribe(response => this.handleSuccessfulResponse(response));
  }

  handleSuccessfulResponse(response) {
    this.accounts = response;
  }

  deleteAccount(account: Account): void {
    this.httpClientService.deleteAccount(account).subscribe(data => {
      this.accounts = this.accounts.filter(u => u !== account);
    });
  }
}

AddAccountComponent.ts

import { Component, OnInit } from "@angular/core";
import { HttpClientService, Account } from "../service/httpclient.service";
import { Router } from '@angular/router';

@Component({
  selector: "app-add-account",
  templateUrl: "./add-account.component.html",
  styleUrls: ["./add-account.component.less"]
})
export class AddAccountComponent implements OnInit {
  account: Account = new Account("","","","","","",0);

  constructor(private httpClientService: HttpClientService,
              private router: Router) {}

  ngOnInit() {}

  createAccount(): void {
    console.debug(this.account);
    this.httpClientService.createAccount(this.account).subscribe(data => {
      alert("Account created successfully.");
      this.router.navigate([''])
    });
  }
}

添加用戶組件.ts

import { Component, OnInit } from '@angular/core';
import {HttpClientService, User, Account} from '../service/httpclient.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-add-user',
  templateUrl: './add-user.component.html',
  styleUrls: ['./add-user.component.less']
})
export class AddUserComponent implements OnInit {
  user: User = new User(null, null,
    null, "","",0,0);

  constructor(private httpClientService: HttpClientService,
              private router: Router) {}

  ngOnInit() {}

  createUser(): void {
    console.debug(this.user);
    this.httpClientService.createUser(this.user).subscribe(data => {
      alert('User created successfully.');
      this.router.navigate(['']);
    });
  }
}

Similar questions I can find: Angular 5: select all users with related role OneToMany Relationship Angularjs + Spring jpa repository Many-to-one field is not saving

這是編譯器的結果：

Angular Windows 上的編譯器

請哪位志願者幫我解決這個問題？ 提前致謝： ：）

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 休眠狀態：一對多/多對一刪除失敗 具有一對多和多對一關系的CriteriaQuery Java Spring 一對多 多對一 MongoDB一對多和多對一關系 如何正確使用一對多和多對一注釋？ Hibernate：通過示例查詢和多對一關系 一對多、多對一和多對多的區別？ 休眠困境，多對多還是一對多，然后多對一？ Hibernate中一對一，多對一和一對多的默認提取類型 休眠多對一
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM