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

Question

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

除了将服务值分配给私有变量之外，我的应用程序正在运行。我创建了一项服务以使其更具动态性。

所以，这是我的服务

/* 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;

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

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