即使在其余部分更改后,Angular应用程序仍可维护信息

时间:2018-07-24 15:35:37

标签: angular

昨天我看到了以下问题Item is deleted, but when you leave the page and come back the item is placed again even if it is not in the postman

几天前,我遇到了同样的问题,直到那时我都没有成功,而且我看到这个问题也不成功。

我正在使用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
    }
}

Print Browser

我在类别表中添加了另外两个记录,并由邮递员再次检索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个项目 enter image description here

它以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 { }

当我删除项目并更新应用程序时也会发生,它仍保留在屏幕上。

0 个答案:

没有答案
相关问题