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

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

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