user111111 user111111 - 1 month ago 5
AngularJS Question

Angular2: How to put return service value into private variable object?

I am creating an Accounting System UI and using angular2 as my framework.

My app is working except for assigning the service value into private var. I created a service to make it more dynamic.

So, here's my Service

/* formdata.ts */

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


/* mocked-form */

import { Formdata } from './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);
}
}


Injecting Service into Component

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);
}
}


If you check the private data in component. I tried to get the data in the service. Unfortunately, no luck.

Basically, it will be a value of inputs and selecboxes.

So, here's my form

<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>


The logic I can think to put a value in ngModel data object is:

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


I also tried this eventhough it I knew that it won't work.

private data = formData;


The second way is to inject value inside the element.

<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

...


I tried all that I can think of. And none of them work. So, I decided to ask it here in SO.

Any help would mean so much to me. Thanks.

Answer

Explanation inside the code.

At your component:

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'] = 'Daniela Oraa';
               this.data['companyUnit'] = 'BIR - Legazpi';
               ...

            */
        })
    }

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

Hope it works with you. Cheers!

Comments