Question

这是我的anglar4创建应用名称为搜索我想从django rest API中获取数据。我希望当我给用户名时它只给我这个用户名数据。

app.components.tc

    import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

  username:string = '';

  constructor(private httpClient:HttpClient){}

  onNameKeyUP(event:any){
     this.username = event.target.value;
  }

  getProfile(){
    console.log(this.username)
    this.httpClient.get("http://127.0.0.1:8000/loginAdmin/?username=${this.username}")
    .subscribe(
      (data:any[]) => {
        console.log(data);
      }
    )
  }


}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.components.html 这是我用来从Django API发送用户名的简单Html

<input type="text" (keyup)="onNameKeyUP($event)">
<button (click)="getProfile()">Get Profile</button>

Answer 1

试试这个：

app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import {
  filter,
  map,
  switchMap,
  debounceTime,
  distinctUntilChanged,
} from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  profile$: Observable<any>;
  ctrl = new FormControl();

  constructor(private httpClient: HttpClient) {}

  ngOnInit() {
    this.profile$ = this.ctrl.valueChanges.pipe(
      filter(v => v.length > 2),
      debounceTime(400),
      distinctUntilChanged(),
      switchMap(username =>
        this.httpClient.get(
          `http://127.0.0.1:8000/loginAdmin/?username=${username}`,
        ),
      ),
    );
  }
}

app.component.html

<input [formControl]="ctrl">
<div> {{ profile$ | async | json }} </div>

app.module.ts

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    ...
  ],
  providers: [...],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor() {}
}

我是使用angular4从django API的用户名获取数据

1 个答案: