Question

在HTML页面中，用户输入ID号。我试图弄清楚如何通过对我的API的HTTP GET调用来获取一个与输入的ID匹配的用户配置文件（从我的SQL数据库）。我研究了新版本的Angular的演变过程，因此我认为我需要使用Angular 6（？）来发送参数。 Angular可以将此对象返回到相同的HTML组件吗？

我已经能够获取所有用户的整个对象，但是没有一个用户与输入的ID匹配（使用带有ID的getter / setter尝试，但没有用）。既然我已经拥有了整个对象，也许有一种不同的方式可以将输入的ID与所有用户对象中的ID相匹配？

HTML ...

   <div class="col-sm-6 form-group">
    <label for="name">Student ID 1</label>
    <input type="text" id="ClassTimesStudentID" name="ClassTimesStudentID" required [(ngModel)]="ClassTimesStudentID"
      class="form-control">
  </div>

  <button class="button" type="button" (click)="getCheckInByID()">Enter</button>

 <!-- This should show the record Id of the one user -->
    <div  *ngFor="let day of userFromID" class="col-sm-6 form-group">
      <label for="id-input">Record Id </label>
      <input type="text" name="studentRowRecordID" [(ngModel)]="day.studentRowRecordID" 
        [(ngModel)]="ClassTimesRowId" class="form-control"> </div>

Component.ts ...

 import { Component, OnInit, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { DataStorageService } from 'src/app/shared/data-storage.service';

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

 export class LogoutComponent implements OnInit {
   public allCheckIns: Array<any>;
   public userFromID: Array<any>;

  constructor(private dataStorageService: DataStorageService) {
     dataStorageService.getCheckInList().subscribe((importCheckIns: any) => 
     this.allCheckIns = importCheckIns);
     console.log('checkins ' + this.allCheckIns);
    }

    ngOnInit() {
   }

 getCheckInByID() {
     this.dataStorageService.getCheckInByID().subscribe((importOne: any) => 
 this.userFromID = [importOne]);
     console.log('one user ' + this.userFromID);
    }

 }

data-storage.service.ts ...

 import { Injectable } from '@angular/core';
 import { Http, Response } from '@angular/http';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import 'rxjs/Rx';

  @Injectable()
  export class DataStorageService {
   private headers: HttpHeaders;
   private accessPointUrl: string = 'http://localhost:59673/api/ClassTimes';

    ClassTimesStudentID: any;


   constructor(private http: HttpClient, private httpClient: HttpClient,) {
   this.headers = new HttpHeaders({'Content-Type': 'application/json; 
   charset=utf-8'});
    }

  // This works, returns all users
     public getCheckInList() {
     return this.http.get(this.accessPointUrl, {headers: this.headers});
   }

   // This is where I need the most help
    public getCheckInByID() {
      let data = this.ClassTimesStudentID;
     return this.http.get(this.accessPointUrl, {params: data}, {headers: 
     this.headers});
   }

Answer 1

我可以通过将其设置为类似于put调用（不使用params）的方式来使其工作。这是新的服务电话...

  public getCheckInByID(payload) {
return this.http.get(this.accessPointUrl + '/' + payload.ClassTimesStudentId, 
{headers: this.headers});
  }

我还必须从“ importOne”中删除括号，但不知道为什么。正确的版本。...

   getCheckInByID() {
  this.dataStorageService.getCheckInByID().subscribe((importOne: any) => 
  this.userFromID = importOne);}

Angular 6 HTTP GET发送ID参数

1 个答案: