Angular 使用API并以图表/角度显示项目

我正在创建一个仪表板应用程序，在这个应用程序中，我必须使用Angular和Spring boot将从MongoDB检索到的统计数据和数据显示到不同类型的图表和地图中。问题是，当我尝试使用API以便在图表中显示数据时，数据是空的。 在writer.service.ts文件下面：

export class WriterService {

  constructor(private http: HttpClient) { }

  getWritersList(): Observable<any> {
    return this.http.get<Writer[]>('http://localhost:8088/users/getall');
  }
}

在控制台中，我得到“Undefined”，图表显示为空，没有显示任何数据

这是我尝试使用的json数据：

[
  {
    "_id": "5d59b7e46b7c143594d5689b",
    "username": "titi",
    "password": "azerty",
    "first_name": "Leo",
    "last_name": "Tolstoy",
    "gender": "male",
    "age": "82",
    "country_of_origin": "Russia",
    "county_of_stay": "Albania",
    "education_level": "master degree",
    "major": "Philosophy",
    "years_of_experience": "50",
    "current_State": "Freelancer",
    "number_of_written_books": 3,
    "number_of_published_books": 2,
    "game_genre": "Action",
    "publisher_name": "HarperCollins",
    "list_of_books":[
      {"_id": "2k49b7e46b7c143594d5689b",
    "title": "War and Peace",
    "description": "War and Peace broadly focuses on Napoleon’s invasion of Russia in 1812 and follows three of the most well-known characters in literature: Pierre Bezukhov, the illegitimate son of a count who is fighting for his inheritance and yearning for spiritual fulfillment; Prince Andrei Bolkonsky, who leaves his family behind to fight in the war against Napoleon; and Natasha Rostov, the beautiful young daughter of a nobleman who intrigues both men.",
    "year_of_publication":1868,
    "category":"historical"},
    {"_id": "4m79b7e46b7c143594d5124l",
    "title": "Anna Karenina",
    "description": "Anna Karenina is the tragic story of Countess Anna Karenina, a married noblewoman and socialite, and her affair with the affluent Count Vronsky. ... Back in Russia, she is shunned, becoming further isolated and anxious, while Vronsky pursues his social life.",
    "year_of_publication":1877,
    "category":"romance"}
    ]
  },
  {
    "_id": "5d5b04da38f3b21f85a063a7",
    "username": "jojo",
    "password": "qsdfgh",
    "first_name": "Jojo",
    "last_name": "Moyes",
    "gender": "female",
    "age": "50",
    "country_of_origin": "United Kingdom",
    "county_of_stay": "Australia",
    "education_level": "master degree",
    "major": "Journalism",
    "years_of_experience": "30",
    "current_State": "Employee",
    "number_of_written_books": 30,
    "number_of_published_books": 20,
    "game_genre": "Romance",
    "publisher_name": "Graywolf Press",
    "list_of_games":[
         {"_id": "5g67b7e46b7c143594d5124l",
    "title": "Me before you",
    "description": "Louisa Clark is an ordinary girl living an exceedingly ordinary life—steady boyfriend, close family—who has barely been farther afield than their tiny village. She takes a badly needed job working for ex–Master of the Universe Will Traynor, who is wheelchair bound after an accident.",
    "year_of_publication":2012,
    "category":"romance"}
    ]
  }
]

---

从您的代码中我可以看到，您正在订阅之外创建一个图表，这意味着，您在还没有任何数据的情况下创建它。您应该在

订阅

中移动该创建

大概是这样的：

ngOnInit() {
    this.wrService.getWritersList().subscribe(
        res => {
            this.wrs=res;
            this.nms=res.username;
            this.bks=res.nb_published_books;
            console.log(res);

            // Line chart:
            this.LineChart = new Chart('lineChart', {
                type: 'line',
                data: {

                    labels: this.nms,
                    datasets: [{
                        label: 'Number of published books',

                        data: this.bks,
                        fill:false,
                        lineTension:0.2,
                        borderColor:"red",
                        borderWidth: 1
                    }]
                }, 
                options: {
                    title:{
                        text:"Line Chart",
                        display:true
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            }
        });
}

试着改变

getWritersList(): Observable<any> {
    return this.http.get<Writer[]>('http://localhost:8088/users/getall');
  }

getWritersList（）：可观察{
返回此.http.get（'http://localhost:8088/users/getall');
}

到

getWritersList（）：可观察{
返回此.http.get（'http://localhost:8088/users/getall');
}

---

看看是否有帮助

请您将服务方法添加到问题中好吗？console.log（res）；res未定义？在浏览器中打开f12控制台，查看是否返回任何内容。我得到了hole json响应，当从列表中检索字段时，它未定义仍然是相同的问题可以添加console.log（'the resp:'，res）；高于此值。wrs=res；我觉得奇怪的是，你可以在f12中看到数据，但仍然无法在this.wrService.getWritersList（）.subscribe方法中获得数据。请检查数据是否在res中。在方法s的顶部写一个特定的控制台日志。例如：console.log（“resp:”，res）。上面是this.wrs=res。我已经查看了stackblitz中的代码，该服务似乎是正确的（除了名称错误）。简化它。删除此.wrService.getWritersList（）.subscribe（res=>{）中的所有其他内容。只需保留console.lognothingchanged@MarTech你能用这个问题创建一个stackblitz示例吗？你能给编辑器发送一个链接，而不是应用程序本身吗？我无法打开它

getWritersList(): Observable<any> {
    return this.http.get<Writer[]>('http://localhost:8088/users/getall');
  }

getWritersList(): Observable<any> {
    return this.http.get<any>('http://localhost:8088/users/getall');
  }