Angular2：返り値のサービス値をプライベート変数オブジェクトに入れる方法は？

Question

会計システムのUIを作成し、フレームワークとしてangular2を使用しています。

私のアプリは、プライベートvarにサービスの値を割り当てる以外は動作しています。私はそれをよりダイナミックにするためのサービスを作りました。

だから、ここに私のサービスの

/* formdata.ts */

export class Formdata { 
    viewBy: string; 
    companyUnit: string; 
    financialYear: string; 
    clients: string; 
} 

/*嘲笑-形式*/

インポート{FORMDATA} './formdata'

から

export const FORMDATA: Formdata[] = [ 
    { 
     viewBy: 'Daniela Oraa', 
     companyUnit: 'BIR - Legazpi', 
     financialYear: '2016', 
     clients: 'Dummy Text 1' 
    } 
]; 

/* form.service.ts */

import { Injectable } from '@angular/core'; 

import { Formdata } from './formdata'; 
import { FORMDATA } from './mocked-form'; 

@Injectable() 
export class FormService { 
    getData(): Promise<Formdata[]> { 
    return Promise.resolve(FORMDATA); 
    } 
} 

あなたがコンポーネントで個人データをチェックするとコンポーネント

import { Component, OnInit } from '@angular/core'; 

import { Formdata } from '../formdata'; 
import { FormService } from '../form.service'; 

@Component({ 
    templateUrl: 'app/html-templates/clientdata_balance.html', 
    styleUrls: ['css/templates.css'], 
    providers: [ FormService ] 
}) 

export class BalanceComponent implements OnInit { 
    formData: Formdata[]; 

    constructor(private formService: FormService){} 

    getData(): void { 
     this.formService.getData().then(formData => this.formData = formData); 
    } 

    ngOnInit(): void { 
     this.getData(); 
    } 

    private data = this.formService.getData().then(formData => this.formData = formData); 

    search_data(data){ 
     console.log(data); 
    } 
} 

にサービスを注入します。私はサービスでデータを取得しようとしました。残念ながら、運はありません。

基本的には、入力と選択の値になります。

だから、ここに私のフォーム

<form> 
    <label class="input-group"> 
    <p>View By</p> 
    <select [(ngModel)]="data.viewBy" name="viewBy"> 
     <option>Daniela Oraa</option> 
     <option>Lovely Laparan</option> 
     <option>Justin Bibo</option> 
    </select> 
    </label> 
    <label class="input-group"> 
    <p>Company Unit</p> 
    <select [(ngModel)]="data.companyUnit" name="companyUnit"> 
     <option>Nusa</option> 
     <option>Bumi</option> 
    </select> 
    </label> 
    <label class="input-group"> 
    <p>Financial Year</p> 
    <select [(ngModel)]="data.financialYear" name="financialYear"> 
     <option>2016</option> 
     <option>2004</option> 
     <option>1945</option> 
     <option>1897</option> 
    </select> 
    </label> 
    <label class="input-group"> 
    <p>Clients</p> 
    <select [(ngModel)]="data.clients" name="clients"> 
     <option>Dummy Text 1</option> 
     <option>Dummy Text 2</option> 
     <option>Dummy Text 3</option> 
    </select> 
    </label> 
    <label class="input-group"> 
    <p>Date From</p> 
    <input type="date" [(ngModel)]="data.dateFrom" name="dateFrom"/> 
    </label> 
    <label class="input-group"> 
    <p>Date To</p> 
    <input type="date" [(ngModel)]="data.dateTo" name="dateTo"/> 
    </label> 
    <button type="button" (click)="search_data(data)">Search</button> 
</form> 

私はngModelデータオブジェクトに値を入れて考えることができるロジックがありますです：私もこの本家を試してみました

private data = { 
    viewBy: 'Daniela Oraa', 
    ... 
} 

それは私が」それが勝ったことを知っていました仕事。

private data = formData; 

第2の方法は、要素内に値を挿入することです。

<form *ngFor="let fdata of formData"> 
    <select [(ngModel)]="data.viewBy" name="viewBy" [ngValue]="fdata.viewBy"> 
    // this method fail but I can get fdata.viewBy value 

    ... 

私は考えることができるすべてを試しました。そして誰も働かない。だから、私はここでそれを尋ねることにしました。

私にはどんな助けもあります。ありがとう。

Answer 1

説明コード内に説明があります。あなたのコンポーネントで

：

import { Component, OnInit } from '@angular/core'; 

import { Formdata } from '../formdata'; 
import { FormService } from '../form.service'; 

@Component({ 
    templateUrl: 'app/html-templates/clientdata_balance.html', 
    styleUrls: ['css/templates.css'], 
    providers: [ FormService ] 
}) 

export class BalanceComponent implements OnInit { 
    formData: Formdata[]; 
    private data = {}; // prevents error property undefined 

    constructor(private formService: FormService){} 

    // no need to reference a function (getData) because you will use it right away 

    ngOnInit(): void { 
     this.formService.getData().then(value => { 
      // getData() from form.service.ts 

      for(let i in value[0]) this.data[i] = value[0][i]; 
      /* Basically, this for ... in loop do the magic. 
       Looping over the object 

       It will be this.data[key] = value 
       -- or -- for example 

       this.data['viewBy'] = 'Sample 1'; 
       this.data['companyUnit'] = 'BIR'; 
       ... 

      */ 
     }) 
    } 

    search_data(data){ 
     console.log(data); 
    } 
} 

は、それはあなたと一緒に動作します願っています。乾杯！

Answer 2

このラインで

private data = this.formService.getData().then(formData => this.formData = formData); 

データ（あなたのサービスからFORM_DATA）はthis.formDataに割り当てられています。

this.dataは、約束を参照するだけです。