这是我的html

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。如果您决定保留私有变量，请在创建设置器后更改代码。

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

    });
}

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

这是我的html

这是我的组成部分

我的服务

1 个答案: