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

Posted 2023-05-07

【中文标题】将输入的值保存在角度 5 的变量中

【英文标题】：save the value of an input in a variable in angular 5

【发布时间】：2019-03-27 20:27:15

【问题描述】：

我是 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://***.com/a/39959287/10543023 和 https://es.***.com/a/5845

【问题讨论】：

您的模板<input name="cedula [(ngModel)]="cedula"> 中有错字，请在cedula 之后添加"。

**我的朋友已经更正了引号，但它仍然不起作用，我收到此错误：**ERROR TypeError: _co.getReservas is not a function at Object.eval [as handleEvent] ( ReservasComponent.html:7) at handleEvent (core.js:10251) at callWithDebugContext (core.js:11344) at Object.debugHandleEvent [as handleEvent] (core.js:11047) at dispatchEvent (core.js:7710) at core .js:8154

【参考方案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;

    );

【讨论】：

朋友和我更正了引号并更改了字符串，但它仍然无法正常工作，并且我得到与往常一样的错误：错误类型错误：_co.getReservas 不是 Object.eval 的函数 [as handleEvent] (ReservasComponent.html:7) at handleEvent (core.js:10251) at callWithDebugContext (core.js:11344) at Object.debugHandleEvent [as handleEvent] (core.js:11047) at dispatchEvent (core.js:7710 ) 在 core.js:8154 在 HTMLButtonElement. (platform-b​​rowser.js:988)