如何在angular2中將數據從服務存儲到類/接口？

Question

即時通訊開發一個Web應用程序，並且即時通訊使用angular2。我的某個組件有問題。該組件充當用戶可以更新其數據的表單。

我想訪問我的json中的特定數據。我使用的當前代碼是將數據存儲在類的一個對象中，但是，我認爲我已經實現了它的錯誤，因此它沒有達到其期望的功能。下面是我UserDetailsComponent

UserDetailsComponents.ts

import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; 
import { Router, ActivatedRoute, Params } from '@angular/router'; 
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms'; 
import { ModalDirective } from 'ng2-bootstrap/modal/modal.component'; 

import { ApiService } from '../../assets/services/api.service'; 

import { UserDetails } from '../../assets/classes/user-details'; 

@Component({ 
    selector: 'app-user-details', 
    templateUrl: './user-details.component.html', 
    styleUrls: ['./user-details.component.scss'] 
}) 
export class UserDetailsComponent implements OnInit, OnDestroy { 

    id: any; 
    data: UserDetails; 

    private sub: any; 

    constructor(
     private route: ActivatedRoute, 
     private apiService: ApiService, 
     private fb: FormBuilder) {} 

    ngOnInit() { 
     this.createForm(); 
     this.sub = this.route.params.subscribe(params =>{ 
     this.id = params['id']; //console.log(this.id); 
     this.apiService.getUserById(this.id).subscribe(values => 
      this.data = values[0]; 
     ) 
     }) 
    } 
} 

而且下面是我爲userDetails類

UserDetails.ts

export class UserDetails { 
    id: string; 
    first_name: string; 
    last_name: string; 
    status: boolean; 
} 

我想要做的是簡單地通過使用this.data訪問id，first_name，last_name，status。

例

createForm(data){ 
     this.userDetailForm = this.fb.group({ 
     id: [this.data.id], 
     first_name: [this.data.first_name, Validators.required], 
     last_name: [this.data.last_name, Validators.required], 
     status: [this.data.status, Validators.required] 
     }); 
} 

任何形式的幫助理解，謝謝。

Answer 1

你需要獲取數據後，可以創建窗體或初始化的形式（空），然後使用後的setValue接收數據:)以下是檢索數據後構建表單的示例：

ngOnInit() { 
    this.sub = this.route.params.subscribe(params =>{ 
    this.id = params['id']; //console.log(this.id); 
    this.apiService.getUserById(this.id).subscribe(values => { 
     this.data = values[0]; 
     this.createForm(); // crete form after retriving data 
    }) 
    }) 
} 

createForm(){ 
     this.userDetailForm = this.fb.group({ 
     id: [this.data.id], 
     first_name: [this.data.first_name, Validators.required], 
     last_name: [this.data.last_name, Validators.required], 
     status: [this.data.status, Validators.required] 
     }); 
} 

，然後在您的模板中，您應該設置一個*ngIf，以便表單不會在視圖中呈現，除非創建表單，以便您的應用程序不會拋出錯誤。

<form [formGroup]="userDetailForm" *ngIf="userDetailForm"> 

Answer 2

改變你的ngOnInit方法

ngOnInit() { 

     this.sub = this.route.params.subscribe(params =>{ 
     this.id = params['id']; //console.log(this.id); 
     this.apiService.getUserById(this.id).subscribe(values => 
      this.data = values[0]; 
      this.createForm(this.data); 
     ) 
     }) 

和你的CreateForm方法

createForm(data){ 
     this.userDetailForm = this.fb.group({ 
     id: [data.id], 
     first_name: [data.first_name, Validators.required], 
     last_name: [data.last_name, Validators.required], 
     status: [data.status, Validators.required] 
     }); 
}