Angular2:如何将返回服务值放入私有变量对象？

Question

我正在创建一个会计系统UI，并使用angular2作为我的框架。

我的应用程序正在工作，除了将服务值分配到私有var之外。我创建了一个服务，以使它更加动态。

这是我的服务

/* formdata.ts */

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

/*模拟-form */

从“./ 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;

第二种方法是在元素中注入值。

<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只获得对承诺的引用。