Data not binding issue in angular 2

Question

I'm new to angular 2 and in my component's ngOnInit() I'm calling a service to get some data. This is my component ngOnInit() code

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

import { Model } from './model';
import { CustomizeModelService } from './customize-model.service';

@Component({
    selector: 'app-customize-model',
    templateUrl: './customize-model.component.html',
    styleUrls: ['./customize-model.component.scss']
})
export class CustomizeModelComponent implements OnInit {

    models = [];

    constructor(private custModelService: CustomizeModelService) {}

    ngOnInit() {
        let params = JSON.stringify({
            "query": "{models(modelname: \"TestModel\") {_id, modelname, description}}"
        });
        this.custModelService.getModelByName(params).subscribe(data => {
            this.models.push(data);
            console.log(this.models);
        });
    }

}

It returns the data, but in my templates when I interpolate the data, it doesn't show anything

<h3 class="title">{{models.modelname}}</h3>

I'm not sure where did I make the mistake, or why the data is not getting bound to the template, Any help will be highly appreciated. Any more code required, I can provide

TIA

Can you show the whole template? Models is an array so it will not have model properties directly on it. Instead you would have to use *ngFor to iterate over each model in the array. also `this.models.push(data));` will add data as a single item to models. — JayChase, Nov 18 '16 at 06:08
@JayChase, Please check the question, I updated the full template code — Mujahid, Nov 18 '16 at 06:12
@JayChase Thanks for your suggestions about *ngFor, not sure why I forgot it in the first place, and now it works. Thanks — Mujahid, Nov 18 '16 at 06:23
@Mujahid.No problem. I'll move the comment to an answer so you can mark it and close off the question. — JayChase, Nov 19 '16 at 01:28

score 1 · Answer 1 · answered Nov 18 '16 at 05:25

1

In Angular 2 Each Http service method returns an Observable of HTTP Response objects so you have to subscribe for its response as below :

this.custModelService.getModelByName(params).subscribe(data => {
  this.models.push(data);
  console.log(this.models);
});

answered Nov 18 '16 at 05:25

ranakrunal9

13,320
3
42
43

Thanks for the suggestion with the Observable, I converted my code to Observables and with the @JayChase suggestion of *ngRepeat, now the code is working. – Mujahid Nov 18 '16 at 06:25

Fujiao Liu · Answer 2 · 2016-11-18T06:00:07.190

0

Try to use *ngIf to make sure the data which from api is ready for use in html. like this <h3 *ngIf="models" class="title">{{models.modelname}}</h3>. without *ngIf, use models.modelname in template before api service finish will be raised an error, but after some seconds, the data will be show when refresh page. console.log is the same.

edited Nov 18 '16 at 06:00

answered Nov 18 '16 at 05:52

Fujiao Liu

2,195
2
24
28

score 0 · Accepted Answer · answered Nov 19 '16 at 01:28

0

Models is an array so it will not have model properties directly on it. Instead you would have to use *ngFor to iterate over each model in the array.

Also

  this.models.push(data));

will add data as a single item to models.

answered Nov 19 '16 at 01:28

JayChase

11,174
2
43
52

Data not binding issue in angular 2

3 Answers3