将输入的值保存在角度 5 的变量中

Question

我是 Angular 的新手，我正在尝试获取输入的值并将其保存在变量中以将其传递给需要参数的服务：

这是我的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

Answer 1

您没有在输入字段中关闭"。您应该关闭"，以便使用ngModel 进行角度双向绑定。

HTML

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

TS

private cedula:string;

我完整的工作示例： https://stackblitz.com/edit/angular-tfjpgu

还有两件事：

1) 你也应该使用string 而不是String。看看这里的答案：Typescript: difference between String and string

2) 如果您要使用私有变量，请确保使用 getter 和 setter。我不建议您将它们设为私有，除非它们用于构造函数或类。不对组件中的私有变量声明 getter 和 setter 是不好的做法。

Typescript Class with private variables。如果您决定保留私有变量，请在创建 setter 后更改您的代码。

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

    });
}