Angular 5 не может установить данные для ngmodel из компонентной функции - PullRequest
Новая
       19

Angular 5 не может установить данные для ngmodel из компонентной функции

0 голосов
/ 26 апреля 2018

В моем проекте angular 5 я могу получить данные из события ngModel, но не могу установить данные для него после некоторого вызова API rest. Я пытаюсь извлечь некоторые данные из вызова rest api и установить данные из функции внутри составная часть. Это мой код.

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>

остальные-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');
    }
  }

После вызова остальных API я не могу установить данные в файле HTML. Значения не меняются, хотя я устанавливаю значения внутри функции.

1 Ответ

0 голосов
/ 26 апреля 2018

используйте оператор стрелки в функции getUser, область действия этого ключевого слова изменена в функции обратного вызова, поэтому используйте оператор стрелки, чтобы предотвратить эти изменения. 

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

  }
...