几天前,我遇到了同样的问题,直到那时我都没有成功,而且我看到这个问题也不成功。
我正在使用angular 6,php中的rest api,并且我正在使用邮递员来跟踪请求
我将演示错误的简单序列。
在邮递员中,我访问以下网址: http://localhost:80/bdevApi/api/index/categoriaexame?page=1
然后恢复.json。
{
"result": {
"item": [
{
"id": "55",
"descricao": "Categoria 3",
"observacao": "",
"status": "1"
}
],
"count": 1,
"paginas": 1
}
}
我在类别表中添加了另外两个记录,并由邮递员再次检索json
{
"result": {
"item": [
{
"id": "55",
"descricao": "Categoria 3",
"observacao": "",
"status": "1"
},
{
"id": "56",
"descricao": "Categoria 5",
"observacao": "Oasdassdasdbs",
"status": "1"
},
{
"id": "57",
"descricao": "Categoria 6",
"observacao": "Oasdassdasdbs",
"status": "1"
}
],
"count": 3,
"paginas": 1
}
}
然后我进入页面并对该页面进行重新加载,因为它将进行重新加载,将再次执行请求并获得o3记录。但这不会发生,只会继续执行1个项目
它以1.继续。当我在大约30秒甚至几分钟后刷新时,将出现这些项目。
我在localhost上运行所有程序,我的角度在端口4200上,其余部分在端口80上。我也在使用allow-control-allow-origin扩展。我已经尝试清除浏览器缓存,清除应用程序缓存,创建新项目。
我的邮递员表现出预期的行为时,我相信api休息不是问题,而是有角度的应用。
源代码
categoria.component.ts
import { CategoriaService } from './../../../services/categoria.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-categoria',
templateUrl: './categoria.component.html',
styleUrls: ['./categoria.component.css']
})
export class CategoriaComponent implements OnInit {
items: Array<any>;
constructor(private categoriaService: CategoriaService) { }
ngOnInit() {
this.listar();
}
listar() {
this.categoriaService.listar()
.subscribe(dados => {
this.items = dados.result.item;
console.log(this.items);
});
}
}
categoria.service
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class CategoriaService {
contatosUrl = 'http://localhost:80/bdevApi/api/index/categoriaexame?page=1';
constructor(private http: HttpClient) { }
listar() {
return this.http.get<any[]>(`${this.contatosUrl}`,
{ headers: { 'token': "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJsb2NhbGhvc3QiLCJzdWIiOiIxIiwiaWF0IjoiMTc6MTAiLCJleHAiOiIxODoxMCJ9.Z73XvNOCYjR6M4XReemQo2SsHL9mhD8IGVP6AuVCz9A=" } });
}
}
categoria.component.html
<h2>Listagem</h2>
<ul>
<li *ngFor="let c of items">
{{c.id}} - {{c.descricao}}
</li>
</ul>
App.module.ts
import { CategoriaService } from './services/categoria.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CategoriaComponent } from './components/categoria/categoria/categoria.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
CategoriaComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
NgbModule.forRoot()
],
providers: [CategoriaService],
bootstrap: [AppComponent]
})
export class AppModule { }
当我删除项目并更新应用程序时也会发生,它仍保留在屏幕上。