Question

我正在创建一个仪表板应用程序，在该应用程序中，我必须使用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');
  }
}

这是我的app.component.ts文件：

export class AppComponent implements OnInit {
  wrs:Writer[];
  title = 'Library Dashboard';
  LineChart=[];
  BarChart=[];
  PieChart=[];

  nms=[];
  bks=[];
  rds=[];

  constructor( private wrService:WriterService) {
      this.wrs=[];
  }



  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
         }
     }]
 }
}
});

在控制台中，我得到“未定义”，并且图表为空，没有显示任何数据。

这是我要使用的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"}
    ]
  }
]

Answer 1

我从您的代码中看到的是，您正在订阅之外创建一个图表，这意味着您在没有任何数据时创建它。您应该将创建的内容移至subscribe内。

类似这样的东西：

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
                            }
                        }]
                    }
                }
            }
        });
}

Answer 2

尝试更改

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');
  }

，看看是否有帮助。

消耗API并在图表/角度显示项目

2 个答案: