typescript 如何在Angular项目中进行动态API调用

ou6hu8tu 于 2023-02-13 发布在 TypeScript

关注(0)|答案(1)|浏览(160)

我使用下面的Typescript函数来访问API数据：

export class BomService {

  constructor(private http: HttpClient) { }

  GetAllBomList(): Observable<IBom[]> {
    return this.http.get<IBom[]>('http:192.168.10.1:5000/api/bom/getallboms');
  }
}

当我使用自己的电脑时，我可以完全载入数据，但当我尝试透过互联网进入互联网时，虽然载入了用户界面，但却无法取得数据。原因是Http地址。API和用户界面都存放在使用IIS的同一台服务器上。我该如何解决这个问题？

typescript

来源：https://stackoverflow.com/questions/75437688/how-to-make-dynamic-api-calls-in-angular-project

1条答案

按热度按时间

7lrncoxx1#

Angular〈14有一个environments文件夹。Angular 15+你需要首先在你的项目中调用ng g environments。然后你会看到这个文件夹/文件（文件名可以不同）

文件如下所示：*
- 环境.发展**

export const environment = {
  serverPath: 'http://localhost:3000',
};

- 环境**（生产）

export const environment = {
  serverPath: 'http://123.123.123.123:3000', // Server path
};

剩下的魔术为你做Angular 。所以在你的服务/组件或你想要的东西中，你需要像这样导入文件：

- 服务**

import { environment } from 'src/environments/environment';

...

  GetAllBomList(): Observable<IBom[]> {
    return this.http.get<IBom[]>(environment.serverPath + '/api/bom/getallboms');
  }

阅读有关here环境的所有信息。简而言之：在angular.json文件中，您将找到环境文件。一个用于dev，一个用于production。如果您运行ng build，Angular将用production文件替换dev文件。您无需执行任何操作。

赞(0）回复(0）举报 2023-02-13

我来回答

typescript 如何在Angular项目中进行动态API调用

1条答案

相关问题

热门标签

最新问答