Angular 5 can't set data to ngmodel from component function

Question

In my angular 5 project, I can get data from the ngModel event but can't set data to it after some rest API call.I try to retrieve some data from rest api calling and set the data from a function inside a component. This is my code.

app.component.ts:

  import {Component,OnInit} from '@angular/core';
  import {RestApiService} from "./rest-api.service";

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit{
    name: string = "";
    email: string = "";
    pass: any = "";
    users=[];
    count:number=0;
    constructor(private _rest: RestApiService) {

    }
    ngOnInit(){
      this.count=this.users.length;
      this.getUsers();
    }
    submit() {
      this._rest.postData({username: this.name, email: this.email, password: this.pass}).subscribe(function (data) {
        console.log(JSON.stringify(data));
        this.name = "";
        this.email = "";
        this.pass = "";
      }, function (err) {
        console.log(err);
      })
    }
    getUsers(){
      this._rest.getUsers().subscribe(function (data) {
        this.email=data[0].email;   // can't bind data to model
        this.users=data;           // can't use it for ngFor
        this.count=this.users.length;
      },function (err) {
          console.log(err)
      })
    }

  }

app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
  <div class="container mar-top">
    <div class="col">
      <div class="form-group row">
        <label for="name" class="col-sm-2 col-form-label">Name</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="name" placeholder="Name"  [(ngModel)]="name">
        </div>
      </div>
      <div class="form-group row">
        <label for="email" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="email" placeholder="email@example.com"
                 [(ngModel)]="email">
        </div>
      </div>
      <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-6">
          <input type="password" class="form-control" id="inputPassword" placeholder="Password"
                 [(ngModel)]="pass">
        </div>
      </div>
      <div class="form-group row">
        <button type="submit" class="btn btn-primary mb-2" (click)="submit()">Submit</button>
      </div>
      <div>
        {{count}}
      </div>
    </div>
  </div>
  <div class="container mar-top">
    <div class="col">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col">Password</th>
          </tr>
        </thead>
        <tbody *ngFor="let user of users;">
            <tr>
              <td>
                {{user.username}}
              </td>
              <td>
                {{user.email}}
              </td>
              <td>
                {{user.password}}
              </td>
            </tr>
        </tbody>
      </table>
    </div>
  </div>
  <router-outlet></router-outlet>

rest-api.service.ts:

import { Injectable } from '@angular/core';
  import {HttpClient,HttpHeaders} from "@angular/common/http";


  const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  @Injectable()
  export class RestApiService {

    constructor(private http:HttpClient) { }
    apiRoot:string="http://127.0.0.1:3001";

    postData(data){
      console.log(JSON.stringify(data));
      return this.http.post(this.apiRoot+'/insertuser', data,httpOptions);
    }
    getUsers(){
      return this.http.get(this.apiRoot+'/getusers');
    }
  }

After the rest API call, I can't set the data in HTML file.The values are not changed though I set the values inside the function.

Answer 1

use arrow operator in getUser function, this keyword's scope changed in callback function so, use arrow operator to prevent this changes.

import {Component,OnInit} from '@angular/core';
  import {RestApiService} from "./rest-api.service";

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit{
    name: string = "";
    email: string = "";
    pass: any = "";
    users=[];
    count:number=0;
    constructor(private _rest: RestApiService) {

    }
    ngOnInit(){
      this.count=this.users.length;
      this.getUsers();
    }
    submit() {
      this._rest.postData({username: this.name, email: this.email, password: this.pass}).subscribe(function (data) {
        console.log(JSON.stringify(data));
        this.name = "";
        this.email = "";
        this.pass = "";
      }, function (err) {
        console.log(err);
      })
    }
    getUsers(){
      this._rest.getUsers().subscribe((data) => {
        this.email=data[0].email;   // can't bind data to model
        this.users=data;           // can't use it for ngFor
        this.count=this.users.length;

      },function (err) {
          console.log(err)
      })
    }

  }