为什么有时我需要刷新网页才能看到我从 api 检索到的数据出现在我的表上？ 角 9

Question

我使用 asp.net 创建了一个 API，我使用 angular 作为我的前端。 我能够很好地获取数据，但有时我需要刷新页面一次或多次才能真正看到我表上的数据。 我完全不知道为什么会发生这种情况。 我希望我在下面插入的代码足以找到我的问题的解决方案

这是我的表格组件的打字稿文件

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; 
import {DataService} from 'src/app/Services/data.service';
import {Anime} from 'src/app/Classes/anime';
import { NgModule } from '@angular/core';
import {MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { DialogComponent } from 'src/app/dialog/dialog.component';

@Component({
  selector: 'app-anime-table',
  templateUrl: './anime-table.component.html',
  styleUrls: ['./anime-table.component.css']
})

export class AnimeTableComponent implements OnInit {

  AnimeArray : Anime[] = [] ;
  data = false;

  constructor(private router : Router, 
    private dataService : DataService,
    private Dialog: MatDialog
    ) {}

  ngOnInit(){

    this.dataService.GetAnime()
    .subscribe(data =>  data.forEach(element => {
      var anime = new Anime();
      anime.AnimeID = element.AnimeID;
      anime.AnimeName = element.AnimeName;
      anime.Anime_Description = element.Anime_Description;
      this.AnimeArray.push(anime);
    }))


  }// ngOnInit

}//Export

下面是html的东西

<br />
<button routerLink="/Dashboard" class="btn btn-primary">Go Home</button>
<button
  routerLink="/CreateAnime"
  class="btn btn-success"
  style="margin-left: 15px;"
>
  Add new Anime
</button>
<br />
<br />

<table class="table table-striped">
  <thead>
    <tr>
      <th>Anime ID</th>
      <th>Anime Name</th>
      <th>Anime Description</th>
    </tr>
  </thead>

  <tbody>
    <tr *ngFor="let anime of AnimeArray">
      <td>{{ anime.AnimeID }}</td>
      <td>{{ anime.AnimeName }}</td>
      <td>{{ anime.Anime_Description }}</td>
      <td>
        <!-- <a [routerLink] = "['/Anime']" [queryParams] = "anime.AnimeID"  class="btn btn-success"> Edit </a>  -->
        <button (click)="EditAnime(anime.AnimeID)" class="btn btn-success">
          Edit
        </button>
        <button
          (click)="DeleteAnime(anime.AnimeID, anime.AnimeName)"
          style="margin-left: 15px;"
          class="btn btn-danger"
        >
          Delete
        </button>
      </td>
    </tr>
  </tbody>
</table>

这是从我创建的 API 获取动漫信息的一段数据服务。

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

import {Anime} from '../Classes/anime';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  url : string;
  header : any;
  option : any;

  constructor(private http : HttpClient) { 
    this.url = 'http://localhost:50484/api/Values/';
    const headerSettings: {[name: string]: string | string[]; } = {};  
    //this.header = new HttpHeaders(headerSettings);
    this.header = {'Authorization' : 'bearer ' + localStorage.getItem('UserToken')}

    let headers = new HttpHeaders({'Authorization' : 'bearer '  + localStorage.getItem('UserToken')})
    this.option = {headers : headers};
  }
  GetAnime() : Observable<Anime[]> {
    console.log(this.header);
    const headers = {'Authorization' : 'bearer ' + localStorage.getItem('UserToken')} 
    return this.http.get<Anime[]>(this.url + 'GetAllAnime/' , {headers});
  }
 } // data service

PS 我目前在浏览器控制台、cmd 或 Visual Studio 代码中没有看到任何错误

Answer 1

首先尝试映射数据并替换整个数组，而不是推入数组。

ngOnInit() {
    this.dataService.GetAnime().subscribe(data => data =>
      (this.AnimeArray = data.map(element => {
        var anime = new Anime();
        anime.AnimeID = element.AnimeID;
        anime.AnimeName = element.AnimeName;
        anime.Anime_Description = element.Anime_Description;
        return anime;
      }))
    );
  } // ngOnInit