时间戳

首页 > 解决方案 > 是否有任何解决方案可以将此服务用于 Angular 10 中的下拉列表？

angular - 是否有任何解决方案可以将此服务用于 Angular 10 中的下拉列表？

问题描述

getDealersList(data){
  //return this.http.get<Dealers>(`${environment.apiUrl+'dealership/get'}`,data,this.httpOption());
  return this.http.post(this.apiUrl+ 'dealerships/get',data,this.httpOption());
}

如何在打字稿文件中调用此服务以制作下拉列表，请帮助我解决这个问题。我需要一个 API 调用或服务调用。

标签： angulartypescript

解决方案

正如我从您提到的描述中了解到的那样，您想调用 Restful API，但您无法做到！正确的？

让我一步一步指导你

步骤 01：创建 API 服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: "root" })
export class ApiService{

  apiUrl: string = "YOUR API BASE URL";

  constructor(private httpClient: HttpClient) {
  }

  httpOption(){
    return { 
      // return your httpOptions 
    };
  }

  getDealersList(data): Observable<any>{
    return this.http.post(this.apiUrl+ 'dealerships/get',data,this.httpOption());
  }
}

步骤 02：在您的组件中使用 ApiService

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-dealers',
  templateUrl: './dealers.component.html',
  styleUrls: ['./dealers.component.css']
})
export class DealersComponent implements OnInit {
  
  data: any;  

  constructor(private apiService: ApiService){ 
  }

  ngOnInit() {
    this.data = {} // assign data which you want to pass 
    this.fetchDealersList();
  }

  async fetchDealersList() {
    try{
      let response = await this.apiService.getDealersList(this.data).toPromise();
      console.log(response);
    } catch(e) {
      console.error(e)
    }   
  }
}

注意：这不是一个合适的解决方案，您可以从中获得帮助来填充下拉列表

推荐阅读