Javascript 无法使用angular获取typescript中的文本字段值

我需要从Angular UI页面获取两种类型的请求，并将其传递到app.component.ts文件中，以便通过HTML页面调用我的REST客户端

请求1:

 ngOnInit():void{

    this.http.get('http://localhost:8081/api/products?productId=7e1308ba2b9af').subscribe(data =>{ 

      console.log(data);
    });
  }

{
  "productId":234242882,
  "purchaseDate" : "2019-12-20",
  "status": "dispatched"
}

结束点：（接到电话）

我刚刚在app.component.html文件中创建了一个文本字段，如下所示：

    <div>
      <input type="text" placeholder="Product ID" class="user_id_text"/>
    </div>
    <div>
      <input type="submit" value="submit"/>
    </div>

上面的代码返回具有正确响应的数据数组。但上述productId值是硬编码的（7e1308ba2b9af）。我只想在用户单击submit按钮并将其传递给QueryParam并运行上述请求时从HTML文本框中获取该值

请求2:

 ngOnInit():void{

    this.http.get('http://localhost:8081/api/products?productId=7e1308ba2b9af').subscribe(data =>{ 

      console.log(data);
    });
  }

{
  "productId":234242882,
  "purchaseDate" : "2019-12-20",
  "status": "dispatched"
}

我必须从文本框中获取以下格式的json文件，并将其作为json请求体传递到下面的端点URL

终点：（看跌期权）

请求JSON:

 ngOnInit():void{

    this.http.get('http://localhost:8081/api/products?productId=7e1308ba2b9af').subscribe(data =>{ 

      console.log(data);
    });
  }

{
  "productId":234242882,
  "purchaseDate" : "2019-12-20",
  "status": "dispatched"
}

如果用户单击submit按钮并调用上面的端点，我只想创建一个文本字段并获取上面的json文件

我对Angular非常陌生，不知道如何实现它。我只是在谷歌上搜索了一下，但我不明白他们是怎么解决的。如果有人向我解释这些事情并指导我解决这个问题，我将不胜感激

使用

[（ngModel）]

将输入绑定到变量：

<div>
  <input type="text" [(ngModel)]="productId" placeholder="Product ID"
         class="user_id_text"/>
</div>

在控制器中：

ngOnInit():void {    
    this.http.get('http://localhost:8081/api/products?productId=7e1308ba2b9af').subscribe(data =>{     
      console.log(data);
    });
}

getById():void {
    const base:string = "http://localhost:8081/api/products";       
    const url:string = `${base}?productId=${this.productId}`;
    this.http.get(url).subscribe(data =>{ 
        console.log(data);
    });    
}

关于请求1：

在输入标记中添加id，然后尝试以下操作：

let variableValue = (<HTMLInputElement>document.getElementById("idproduct")).value

请求1 我们可以使用ReactiveFormsModule直接从用户输入中获取值，然后动态地将其提供给api

我们还需要导入HttpClientModule

为实现这一目标：

app.module.ts

导入ReactiveFormsModule和HttpClientModule后，我们现在可以使用FormBuilder和FormGroup动态跟踪用户输入，并使用HttpClient向api发送get请求

app.component.ts

从'@angular/core'导入{Component，OnInit}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
productIDForm:FormGroup；
httpHeaders：新的httpHeaders({
“内容类型”：“应用程序/json”，
})
建造师(
私有formBuilder:formBuilder，
私有http:HttpClient
) { }
恩戈尼尼特（）{
this.productIDForm=this.formBuilder.group({
“productID:[null，[Validators.required，Validators.nullValidator]]
})
}
onSubmit（）{
如果（this.productIDForm.invalid）返回；
this.getProduct（this.productID.get（'productID'）.value）。订阅(
（res）=>{
控制台日志（res）；
//如果请求成功，则“res”包含有关产品的信息。
},
（错误）=>{
控制台日志（err）；
//如果请求失败，“err”包含失败原因的信息
)
}
getProduct（productID:string）：可观察{
返回this.http.get(
`http://localhost:8081/api/products?productId=${productID}`，
{headers:this.httpHeaders}
)
}
}

我们现在需要将输入字段绑定到productIDForm

app.component.html

请求2 我们仍然使用ReactiveFormsModule、FormBuilder和FormGroup动态获取用户输入，并将其绑定到api PUT请求

app.component.ts

从'@angular/core'导入{Component，OnInit}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“rxjs”导入{Observable}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
productIDForm:FormGroup；
httpHeaders：新的httpHeaders({
“内容类型”：“应用程序/json”，
})
建造师(
私有formBuilder:formBuilder，
私有http:HttpClient
) { }
恩戈尼尼特（）{
this.productDetailsForm=this.formBuilder.group({
“productID:[null，[Validators.required，Validators.nullValidator]]，
'purchaseDate'：[null，[Validators.required，Validators.nullValidator]]，
“状态”：[null，[Validators.required，Validators.nullValidator]]
})
}
onSubmit（）{
如果（this.productDetailsForm.invalid）返回；
让recordNewDetails={
“productId”：this.productDetailsForm.get（'productId'）.value，
“purchaseDate”：此.productDetailsForm.get（'purchaseDate'）.value，
“状态”：this.productDetailsForm.get（'status'）.value
}
recordNewDetails=JSON.stringify（recordNewDetails）；//这将把'recordNewDetails'格式化为JSON格式。
此.updateRecord（recordNewDetails）.subscribe(
（res）=>{
控制台日志（res）；
//如果请求成功，则“res”包含有关产品的信息。
},
（错误）=>{
控制台日志（err）；
//如果请求失败，“err”包含失败原因的信息
)
}
updateRecord（productDetails:{}）：可观察{
返回this.http.put(
`https://localhost:8081/api/updateRecord`m
产品详情，
{headers:this.httpHeaders}
)
}
}

app.component.html

选择状态选项
派遣

谢谢。让我试试。我能用同样的方法处理请求2吗？它会返回JSON格式。Upvoting..因为它也能帮助我更好地理解。这不是一种有角度的方式。代码非常简单，我可以逐行理解。非常感谢。让我试试。谢谢分享。让我也来看看这个。UpvotinG

import {ReactiveFormsModule} from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [...],
imports: [...,ReactiveFormsModule, HttpClientModule],
providers: []...

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http';




@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
   productIDForm: FormGroup;
    httpHeaders: new HttpHeaders({
      'Content-Type': 'application/json',
   })
   constructor(
     private formBuilder: FormBuilder,
     private http: HttpClient
   ) { }



ngOnInit() {
     this.productIDForm = this.formBuilder.group({
       'productID': [null, [Validators.required, Validators.nullValidator]]
    })
  }

 onSubmit() {
if (this.productIDForm.invalid) return;

this.getProduct(this.productID.get('productID').value).subscribe(
  (res) => {
    console.log(res);
// If the request was successful then `res` contains the information about the product.
  },
(err) => {
  console.log(err);
// If the request failed, `err` contains the information why the failure occured
 )
 }



getProduct(productID: string): Observable<any> {
        return this.http.get(
          `http://localhost:8081/api/products?productId=${productID}`,
       { headers: this.httpHeaders }

       )
    }
}

<form [formGroup]="productIDForm">
      <input formControlName="productID" type="text" class="user_id_text"/>
    </form>
    <div>
      <input (click)="onSubmit()" type="button" />
    </div>

    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { Observable } from 'rxjs';


    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })

    export class AppComponent {

    productIDForm: FormGroup;
        httpHeaders: new HttpHeaders({
          'Content-Type': 'application/json',
       })

   constructor(
     private formBuilder: FormBuilder,
     private http: HttpClient
   ) { }



ngOnInit() {
     this.productDetailsForm = this.formBuilder.group({

'productID': [null, [Validators.required, Validators.nullValidator]],
'purchaseDate': [null, [Validators.required, Validators.nullValidator]],
'status': [null, [Validators.required, Validators.nullValidator]]
})

}


onSubmit() {

    if (this.productDetailsForm.invalid) return;
    let recordNewDetails = {
        "productId": this.productDetailsForm.get('productID').value,
        "purchaseDate": this.productDetailsForm.get('purchaseDate').value,
        "status": this.productDetailsForm.get('status').value
    }
  recordNewDetails = JSON.stringify(recordNewDetails); // This will format `recordNewDetails` to JSON format.

this.updateRecord(recordNewDetails).subscribe(
  (res) => {
    console.log(res);
// If the request was successful then `res` contains the information about the product.
  },
(err) => {
  console.log(err);
// If the request failed, `err` contains the information why the failure occured
 )
 }

updateRecord(productDetails: {}): Observable<any> {
        return this.http.put(
          `https://localhost:8081/api/updateRecord`m
           productDetails,
          { headers: this.httpHeaders }

       )
    }
}

<form [formGroup]="productDetailsForm">
      <input formControlName="productID" type="text" class="user_id_text"/>
<input formControlName="purchaseDate"  type="date">
<select formControlName="status">
    <option disabled>Select Status Option</option>
    <option>Dispatched</option>
  </select>
    </form>

    <div>
      <input (click)="onSubmit()" type="button" />
    </div>