Блог

Я пытался отобразить данные ответа из Rest Get Api, но данные не отображаются, а также ошибки нет.

Пожалуйста, помогите с этим.

мой html-код

 <div>
  <app-my-page *ngFor="let c of data">{{c}}</app-my-page>
</div>
  

мой код component.ts

 import {
  Component,
  OnInit,
  ViewChild
} from '@angular/core';
import {
  ChartDataSets,
  ChartOptions
} from 'chart.js';
import {
  Color,
  Label
} from 'ng2-charts';
import {
  DataService
} from '../data.service';
import {
  User
} from '../User.module';


@Component({
  selector: 'app-my-page',
  templateUrl: './my-page.component.html',
  styleUrls: ['./my-page.component.css']
})
export class MyPageComponent implements OnInit {
  constructor(private dataService: DataService) {}

  ngOnInit() {
    console.log("here");
    return this.dataService.getUsers()
      .subscribe(data => this.Users$ = data);
  }
}
  

мой user.module.ts

 export class User {
  id: string;
  name: string;
}
  

мой код app.module.ts

 import {
  HttpClientModule
} from '@angular/common/http';
import {
  DataService
} from './data.service';

imports: [HttpClientModule], **
  my dataservice.ts code **

  import {
    HttpClient
  } from '@angular/common/http';
import {
  Injectable
} from '@angular/core';
import {
  User
} from './User.module';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  apiurl = 'http://localhost:8080/test/test';

  constructor(private _http: HttpClient) {}

  getUsers() {

    return this._http.get < User[] > (this.apiurl);
  }
}
  

отредактировано: в консоли браузера нет ошибок, а в rest api есть данные введите описание изображения здесь
введите описание изображения здесь

попробуйте это. это должно сработать.

 export class MyPageComponent implements OnInit {
          data: any;
          constructor(private dataService: DataService) {}
        
          ngOnInit() {
            console.log("here");
            this.getUsersDetails();
          }
    
          getUsersDetails(){
              this.dataService.getUsers()
              .subscribe(result=> { 
                  this.data = result
              }, error => {
                  console.log(error)
              });
          }
        }
  

в вашем классе компонентов нет переменной data. выполните следующий псевдокод

 export class MyPageComponent implements OnInit {

  data: User[]; // this is missing in your class

  constructor(private dataService: DataService) {}

  ngOnInit() {
    console.log("here");
    return this.dataService.getUsers()
      .subscribe(users => {
        this.data = users; // set the value of data like this
    });

  }
}
  

и все готово