angular - 无法在 Angular 上获取 API 数据
问题描述
我已将我的项目上传到 Heroku,其中 Django Rest 作为后端,Angular 作为前端。除了我无法在https://branches-front-shiv.herokuapp.com/中获取 API 请求(分支/)外,一切都在本地运行良好。
因此,在上图中,您可以看到左侧有空白输出,来自branches-front-shiv.herokuapp.com,右侧有表格、分页控件。我没有任何错误,它只是一个空白页(我猜是因为这些 API 请求)。我不知道如何解决它。
组件.ts
export class ShowBranchesComponent implements OnInit {
branches: any = [];
branchName: any; // any
p: number = 1;
options = ["All Cities", 'MUMBAI', 'KOLKATA', 'DEHLI', 'CHANDIGARH', 'NOIDA']
selected: any = "All Cities";
selectedData: any;
constructor(private service: ShareService) { }
ngOnInit(): void {
// this.refreshBranchList();
this.service.getBranchList().subscribe((response: any) => {
this.branches = response;
this.selectedData = this.branches;
});
}
服务.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ShareService {
readonly APIUrl = "https://branches-shiv.herokuapp.com";
readonly PhotoUrl = "http://127.0.0.1:8000/media/";
constructor(private http: HttpClient) { }
getBranchList(): Observable<any[]> {
return this.http.get<any[]>(this.APIUrl + '/branches/');
}
getAllNames(): Observable<any[]> {
return this.http.get<any[]>(this.APIUrl + '/branches/');
}
}
应用模块.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BranchesComponent } from './branches/branches.component';
import { ShowBranchesComponent } from './branches/show-branches/show-branches.component';
import { ShareService } from './share.service'
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { Ng2OrderModule } from 'ng2-order-pipe';
import { NgxPaginationModule } from 'ngx-pagination';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
@NgModule({
declarations: [
AppComponent,
BranchesComponent,
ShowBranchesComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
Ng2SearchPipeModule,
Ng2OrderModule,
NgxPaginationModule,
NgMultiSelectDropDownModule.forRoot()
],
providers: [ShareService],
bootstrap: [AppComponent]
})
在评论部分提及您想看到的任何其他代码文件。谢谢你。
app.components.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular';
}
服务器.js
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname + '/dist/angular'));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname +
'/dist/myapp/index.html'));
});
app.listen(process.env.PORT || 8080);
app.routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BranchesComponent } from './branches/branches.component';
const routes: Routes = [
{ path: 'branches', component: BranchesComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
解决方案
在您的app.routing.ts中,您将分支定义为 urls 路径,
const routes: Routes = [
{ path: 'branches', component: BranchesComponent },
];
service.ts还有/branches/
获取 API 请求的参考,这可能会覆盖您的 url 路径。
尝试将其中一个更改为空字符串:
const routes: Routes = [
{ path: '', component: BranchesComponent },
];
推荐阅读
- flutter - 如何计算 Flutter 上两个位置之间的距离?(结果应该是米)
- c# - 如何通过 c# 代码为 Kentico 12 中的新子域生成新许可证
- python-datetime - 气流调度程序在其开始日期之前执行 dag
- reactjs - 如何在另一个组件的已绑定 onClick 事件中使用更新后的变量?
- python - 获取类型错误:'int' 对象在 Python 3 中不可下标
- node.js - Socket.io 访问控制允许来源通配符
- javascript - 在 django 中显示图像
- laravel - 如何在laravel中使用数组保存多个数据
- linux - 如果我导入“C”,则无法交叉编译
- javascript - 使用矩阵查找最短路径遍历