Html 使用Angular的http get请求

我有一个关于使用angular的get和put请求的问题。 我知道，当我点击一个按钮时，如何执行get或put请求。为此，我只需将请求绑定到按钮。但是现在我希望能够在没有按钮的情况下发出get请求。这意味着ich可以输入一个条形码，只需在输入时单击键盘即可释放get请求。 get外观的常规代码，例如：

this.codeService.getBarcode(barcode).subscribe(_=>
  ...
)

---

我的问题是，如果您想在加载应用程序时不单击而只单击时间

获取数据，如果我没有按钮可单击，我必须在订阅中做什么才能执行此获取请求。
您可以直接在组件中编写，但这不是一个干净的代码。
您最好编写一个包含
get
和
put
的服务。
这里有一个小例子。
这里有
get
、
post
、
put
和
delete

export class EmployeeService {

  private baseUrl = "http://localhost:8081/rest/user";

  constructor(private http: HttpClient) { }

  getEmployee(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/${id}`);
  }
  createEmployee(employee: object): Observable<object> {
    return this.http.post(`${this.baseUrl}`, employee);
  }


  updateEmployee(id: number, value: any): Observable<object> {
    return this.http.put(`${this.baseUrl}/${id}`, value);
  }

  deleteEmployee(id: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/${id}`);
  }

  getEmployeesList(): Observable<any> {
    return this.http.get(`${this.baseUrl}`);
  }
}

您可以有这样一个界面

export class Employee {
  id: number;
  name: string;
  age: number;
}

您的组件
ts

export class EmployeeListComponent implements OnInit {
  employees: Observable<Employee[]>;

  constructor(private employeeService: EmployeeService,
    private router: Router) {}

  ngOnInit() {
    this.reloadData();
  }

  reloadData() {
    this.employees = this.employeeService.getEmployeesList();
  }

  deleteEmployee(id: number) {
    this.employeeService.deleteEmployee(id)
      .subscribe(data => console.log(data, id));
    this.reloadData();
  }

  employeeDetails(id: number) {
    this.router.navigate(['details', id]);
  }
}

如果您希望在加载应用程序时不单击而是在
OnInit
时间内
获取数据。
您可以直接在组件中编写，但这不是一个干净的代码。
您最好编写一个包含
get
和
put
的服务。
这里有一个小例子。
这里有
get
、
post
、
put
和
delete

export class EmployeeService {

  private baseUrl = "http://localhost:8081/rest/user";

  constructor(private http: HttpClient) { }

  getEmployee(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/${id}`);
  }
  createEmployee(employee: object): Observable<object> {
    return this.http.post(`${this.baseUrl}`, employee);
  }


  updateEmployee(id: number, value: any): Observable<object> {
    return this.http.put(`${this.baseUrl}/${id}`, value);
  }

  deleteEmployee(id: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/${id}`);
  }

  getEmployeesList(): Observable<any> {
    return this.http.get(`${this.baseUrl}`);
  }
}

您可以有这样一个界面

export class Employee {
  id: number;
  name: string;
  age: number;
}

您的组件
ts

export class EmployeeListComponent implements OnInit {
  employees: Observable<Employee[]>;

  constructor(private employeeService: EmployeeService,
    private router: Router) {}

  ngOnInit() {
    this.reloadData();
  }

  reloadData() {
    this.employees = this.employeeService.getEmployeesList();
  }

  deleteEmployee(id: number) {
    this.employeeService.deleteEmployee(id)
      .subscribe(data => console.log(data, id));
    this.reloadData();
  }

  employeeDetails(id: number) {
    this.router.navigate(['details', id]);
  }
}

@没问题。但我真的不明白你想要什么。例如，当您输入条形码并通过此条形码获取数据时，是否要发出获取请求？我在这里再次写下我的问题：-）更详细地说，您可以看到第一个条形码的顶部answer@HermanNguekeng然后，您需要在
输入中使用
keyup-enter
或类似的方法<代码>
@HermanNguekeng没问题。但我真的不明白你想要什么。例如，当您输入条形码并通过此条形码获取数据时，是否要发出获取请求？我在这里再次写下我的问题：-）更详细地说，您可以看到第一个条形码的顶部answer@HermanNguekeng然后，您需要在
输入中使用
keyup-enter
或类似的方法<代码>