検索されたmysqlデータベースオブジェクトのフィールドはすべて定義されていません

Question

私は角度4のログインコンポーネントを作成しようとしています。バックエンドのSpringブートでは、Spring Data RestとMySQLデータベースが使用されます。送信されたログインの詳細を、取得したアカウントのログイン資格情報でチェックしたいとき、取得したアカウントオブジェクトのすべてのフィールドが未定義であるため、オブジェクト自体が未定義ではないため、これを行うことができません（if構造）。誰かが自分のコードを見て、どこに問題があるのか​​を教えてもらえますか？まず、4つのクラスとサービス、そしてアカウントpojoとSpring RESTリポジトリから始めましょう。

角度4つのクラス：

import {Person} from "./Person"; 
import {Role} from "./Role"; 
export class Account { 
    id: number; 
    username: string; 
    password: string; 
    person: Person; 
    roles: Role[]; 

} 

export class LaborPeriod{ 
    id: number 
    beginDate: Date 
    endDate: Date 
    hours: number 
} 

import {LaborPeriod} from "./LaborPeriod"; 
export class Person{ 
    id:number 
    name:string 
    laborPeriods:LaborPeriod[] 
} 


export class Role{ 
    id: number 
    name: string 
} 

ログインコンポーネントクラス：

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'], 
    providers: [AccountService] 
}) 
export class LoginComponent { 
    title: string; 
    loginForm: FormGroup; 

    constructor(private fb: FormBuilder, 
       private accountService: AccountService, 
       private router: Router) { 
    this.title = "Inloggen"; 
    this.loginForm = fb.group({ 
     email: ['', [Validators.required, Validators.email]], 
     password: ['', Validators.required] 
    }); 
    } 

    onSubmit() { 
    const formModel = this.loginForm.value; 

    const account: Account = this.accountService.authenticate(formModel.email, formModel.password); 
    console.log(account.id + " " + account.password + " " + " " + account.username) 
    console.log(account !== undefined) 
    // if (account !== undefined) { 
    // this.router.navigate(["account/update", account.id]); 
    // } 
    // else{/*username or password doesent exist*/} 
    } 
} 

AccountServiceの

authenticate(username: string, password: string): Account { 
    return this.restapi.postCredentials(username, password); 
    } 

restApiの関連方法

@Injectable() 
export class RestApiService { 
    apiUrl: string = "/api/accounts"; 
    apiPostUrl: string = "api/accounts/search/findByUsernameAndPassword"; 
    data: Account; 


    constructor(private http: Http) {} 

    getData(){ 
    return this.http.get(this.apiUrl).map((res: Response) => res.json()) 
    } 

    getContacts(){ 
    this.getData().subscribe(data=> {console.log(data); this.data = data}) 
    } 

    postCredentials(username:string, password:string): Account { 
    let params = new URLSearchParams(); 
    params.append("username", username); 
    params.append("password", password); 
    // params.set("username", "henk@gmail.com"); 
    // params.set("password", "12345"); 
    this.http.get(this.apiPostUrl, {params: params}).map((res: Response) => res.json()).subscribe(data=> { this.data = data}); 
    console.log(this.data); 
    return this.data; 
    } 

} 

バックエンド

@Entity 
public class Account { 
    @Id 
    @GeneratedValue 
    private Long id; 
    private String username; 
    private String password; 
    @ManyToMany(cascade = CascadeType.ALL) 
    private List<Role> roles; 
    @OneToOne(cascade = CascadeType.ALL) 
    private Person person; 

@Entity 
public class LaborPeriod { 
    @Id 
    @GeneratedValue 
    private Long id; 
    private Instant beginDate; 
    private Instant endDate; 
    private Integer hours; 

@Entity 
public class Role { 
    // 
    @Id 
    @GeneratedValue 
    private Long id; 
    private String name; 

@Entity 
public class Person { 
    @Id 
    @GeneratedValue 
    private Long id; 
    private String name; 
    @OneToMany(cascade = CascadeType.ALL) 
    private Collection<LaborPeriod> laborPeriods; 

アカウントのリポジトリですべてのために今

@RepositoryRestResource 
public interface AccountRepository extends JpaRepository<Account, Long> { 
    Account findByUsername(@Param("username") String username); 
    Account findByUsernameAndPassword(@Param("username") String username, @Param("password") String password); 
} 

ヘルプははるかに高く評価されるだろう。

Answer 1

投稿リクエストからObservableを返す必要があります。これはの非同期です。ご返信はコールバックでご利用いただけます。あなたがコールバックsubscribeから試してやろうとしても、これは不可能です。これもやはり非同期です。だから、あなたはあなたのポストの要求から復帰するために必要なもの観察可能である：

return this.http.get(this.apiPostUrl, {params: params}) 
    .map((res: Response) => res.json()) 

ここでは、実際に私はそれがここにあなたのために便利だ方法を見ていない、との間からauthenticate方法をスキップできます。しかし、あなたがそれを保持したいなら、もちろんあなたはできます:)

それでは、あなたのコンポーネントでこの投稿リクエストを購読することです。読む価値

constructor(private restApiService: RestApiService /** **/) { } 

onSubmit() { 
    const formModel = this.loginForm.value; 
    this.restApiService.postCredentials(formModel.email, formModel.password); 
    .subscribe(.....) 
} 

：How do I return the response from an Observable/http/async call in angular2?

Answer 2

利用代わりにクラスのinterfaceと以下のようにあなたの応答を型キャスト、

getData(){ 
    return this.http.get(this.apiUrl).map((res: Response) => <Account> res.json()) 
    } 

注：あなたは、クラスを使用している場合は、プロパティを設定するためのコンストラクタを持つ必要があります。