сохранить значение ввода в переменной в угловых 5 - PullRequest
Новая
       39

сохранить значение ввода в переменной в угловых 5

0 голосов
/ 23 октября 2018

Я новичок в угловых и пытаюсь получить значение ввода и сохранить его в переменной, чтобы передать его в мой сервис, который нуждается в параметре:

это мой HTML 

<form class="main-form">

  <div class="form-group col-md-4">
    <label for="cedula">Numero de cedula</label>
    <input type="text" class="form-control" id="cedula" name="cedula [(ngModel)]="cedula" placeholder="Ingrese su numero de cedula">
   <br>
   <button type="submit" (click)="getReservas(cedula)" class="btn btn-primary">Consultar</button>

  </div>

</form>
<h1>Usuario Reservado</h1>
<div class="clear"></div>
<table class="table" >
  <thead>
    <tr>

      <th scope="col">Cedula</th>
      <th scope="col">Nombre</th>
      <th scope="col">Edad</th>
      <th scope="col">Fecha</th>
      <th scope="col">Origen</th>
      <th scope="col">Destino</th>
      <th scope="col">Hora</th>
      <th scope="col">Telefono</th>
      <th scope="col">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of reserva">

      <td>{{item.cedula}}</td>
      <td>{{item.nombre}}</td>
      <td>{{item.edad}}</td>
      <td>{{item.fechar}}</td>
      <td>{{item.origenr}}</td>
      <td>{{item.destinor}}</td>
      <td>{{item.hora}}</td>
      <td>{{item.telefono}}</td>
      <td>{{item.precior}}</td>

    </tr>

  </tbody>
</table>

это мой компонент 

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

import {ReservasService} from './reservas.service';
import {ReservasModel} from './../modelo/reservas.model';

@Component({
  selector: 'app-reservas',
  templateUrl: './reservas.component.html',
  styleUrls: ['./reservas.component.css'],
  providers:[ReservasService]
})
export class ReservasComponent implements OnInit {
    private reserva:Array<ReservasModel>;
    private cedula:String;
  constructor(private rs:ReservasService) { }

  ngOnInit() {
    this.loadRes();
  }

private loadRes():void{
    this.rs.getReservas(this.cedula).subscribe(res=>{
        this.reserva=res;

    });
}
}

мой сервис 

import { Injectable } from '@angular/core';
import  {HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';

import {ReservasModel} from './../modelo/reservas.model';


@Injectable({
  providedIn: 'root'
})
export class ReservasService {

  constructor(private http:HttpClient) { }

  public getReservas(cedula:String):Observable<ReservasModel[]>{

    return this.http.get<ReservasModel[]>("http://localhost:8080/getConsultarCc?cc="+cedula);

  }
}

что я делаю не так, я бы поблагодарил любого, кто может мне помочь.

попробоватьэта форма, но я получаю сообщение об ошибке: https://stackoverflow.com/a/39959287/10543023 и https://es.stackoverflow.com/a/5845

1 Ответ

0 голосов
/ 23 октября 2018

Вам не хватает закрытия " в поле ввода.Вы должны закрыть ", чтобы угловая двусторонняя привязка работала, используя ngModel.

HTML 

<input type="text" class="form-control" id="cedula" name="cedula" [(ngModel)]="cedula" placeholder="Ingrese su numero de cedula">

TS 

private cedula:string;

I полный рабочий пример: https://stackblitz.com/edit/angular-tfjpgu

Еще две вещи:

1) Также вы должны использовать string вместо String.Посмотрите на ответы здесь: Машинопись: разница между строкой и строкой

2) если вы собираетесь использовать закрытые переменные, убедитесь, что вы используете методы получения и установки.Я не предлагаю вам делать их приватными, если они не предназначены для конструкторов или классов.Не рекомендуется объявлять методы получения и установки частных переменных в компонентах.

Класс Typescript с закрытыми переменными .Если вы решили оставить приватную переменную, измените свой код после создания сеттеров. 

private loadRes():void{
    this.rs.getReservas(this.getCedula()).subscribe(res=>{
        this.reserva=res;

    });
}
...