具有多个参数的Angular http

Question

这是我的html文件：

<div align="center">
  <form (ngSubmit)="onLoginSubmit()" class="fullForm">

    <div class="imgcontainer">

    </div>
    <h2>PL Auth</h2>
    <div class="container">
      <form (ngSubmit)="generateOtpSubmit()" class="generateOtpForm">
        <label>
          <b>Username: </b>
        </label>
        <input type="text" placeholder="Enter Username" id="username" [(ngModel)]=userName name="uname" required>
        <br>
        <br>
        <label>
          <b>Password : </b>
        </label>
        <input type="password" placeholder="Enter Password" id="password" [(ngModel)]=password name="psw" required>
        <br>
        <br>
        <button type="submit" class="otpButton">Generate OTP</button>
      </form>
      <br>
      <br>
      <label>
        <b>Enter OTP : </b>
      </label>
      <input type="text" placeholder="Enter OTP" id="otp" [(ngModel)]=otp name="otp" required>
      <br>
      <br>
      <button type="submit" class="loginButton">Login</button>
    </div>
  </form>
</div>

在我的app.component.ts中，我试图获取两个HTTP资源。

• 一种将generateOtp()与一个参数一起使用。

• 第二个使用带有3个参数的logSubmit() 。

generatingOtp （）工作正常，但logSubmit （）不工作。 我使用ngModel从HTML文件绑定username ，密码，otp。

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Headers, Http, Response } from '@angular/http';
import { HttpClient } from '@angular/common/http'

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

export class AppComponent implements OnInit {

  otpsubmitted = false;
  loginSubmitted = false;
  userName = '';
  password = '';
  otp ='';
  userAuthCheck='';
  authCheck ='';

  ngOnInit() {
  }

  constructor(private http: Http,private httpClient: HttpClient ) { }

  private generateOtp(){
    this.http.get('http://localhost:8080/generateotp/'+this.userName+'/')
    .subscribe(
      (res:Response)=> {
        const otpChecking = res.text;
        console.log(otpChecking);
        //this.samp = otpChecking;
      } 
    )
  }

  private logSubmit(){
    this.http.get('http://localhost:8080/authUser'+this.userName+'/'+this.password+'/'+this.otp+'/')
    .subscribe(
      (res:Response)=> {
        const authCheck = res.json();
        console.log(authCheck);
         this.userAuthCheck = authCheck;
      }
    )
  }



  generateOtpSubmit() {
    this.otpsubmitted = true;
    this.generateOtp();
  }

  onLoginSubmit(){
    this.loginSubmitted = true;
    this.logSubmit1();
  }
}

Answer 1

在logSubmit你缺少回来后斜线authUser ：

this.http.get('http://localhost:8080/authUser/' + this.userName + '/' + this.password + '/' + this.ot)
.subscribe(
  (res:Response)=> {
    const authCheck = res.json();
    console.log(authCheck);
     this.userAuthCheck = authCheck;
  }
)

另外，您不需要在末尾使用反斜线，并且使用模板文字可以使整个URL看起来更好：

const url = `http://localhost:8080/authUser/${this.userName}/${this.password}/${this.ot}`;

您可以检查开发人员工具中的“网络”标签，然后查看所调用的网址是否正确吗？ 那应该让您知道什么可能是错误的。 如果为红色-您的网址错误，则在这种情况下，您的API可能已经提示您什么地方出了问题。