Angular 6 - отображение данных из базы данных с помощью * ngFor - PullRequest
Новая
       23

Angular 6 - отображение данных из базы данных с помощью * ngFor

0 голосов
/ 16 октября 2018

Я пытаюсь отобразить данные из базы данных.Я нашел примеры в Интернете, но он не работает вообще

Ошибка от Eclipse:

java.lang.IllegalArgumentException: идентификатор для загрузки требуется для загрузки

Мой HTML-файл: 

<ul>
  <li *ngFor="let questionnaire of questionnaires | async">{{questionnaire.name}}</li>
</ul>

Мой файл машинописного текста: 

import { Injectable } from '@angular/core';
import { Component, OnInit, Input } from '@angular/core';
import {QuestionnaireService} from '../services/questionnaire.service';
@Injectable()


@Component({
  selector: 'app-qcm',
  templateUrl: './qcm.component.html',
  styleUrls: ['./qcm.component.sass']
})
export class QcmComponent implements OnInit {
  @Input()
  questionnaires :any = [];
  constructor(private questionnaireService: QuestionnaireService) { }

  ngOnInit() {
    this.questionnaires = this.questionnaireService.getQuestionnaire(1);
  }

}

Мой сервис: 

import {environment} from '../../environments/environment';
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

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

  user: any;

  constructor(private http: HttpClient) {}

  getQuestionnaire(id: number) {
    return this.http.get<any>(`${environment.apiUrl}getQuestionnaire`);
  }
}

Вот мой метод веб-сервиса (весенний спящий режим) 

@GET
    @Path("/getQuestionnaire")
    public Questionnaire getQuestionnaire(@QueryParam("id") Long id) throws Exception {
        return FacadeBackOffice.getInstance().getQuestionnaireService().getQuestionnaire(id);
    }

Ответы [ 3 ]

0 голосов
/ 16 октября 2018

Возможно, вы столкнулись с проблемой асинхронного вызова данных.Пожалуйста, попробуйте подписаться на ваш сервис и затем сохранить данные в вашем массиве.например, 

ngOnInit() {
        this.questionnaireService.getQuestionnaire()
.subscribe(
    (data) => {
    this.questionnaires= data;
    });
      }
0 голосов
/ 16 октября 2018

Попробуйте вывести async из html, а затем вместо этого добавьте .subscribe() в службу.Кроме того, удалите @Input(), похоже, он не нужен, так как ngOnInit вашего компонента будет заполнять массив.

Я добавил console.log(), чтобы вы знали, что находится в вашем сервисном вызове на случай, если вам понадобится что-то вроде this.questionarries = response.body.

html 

<ul>
  <li *ngFor="let questionnaire of questionnaires">{{questionnaire.name}}</li>
</ul>

компонент 

import { Injectable } from '@angular/core';
import { Component, OnInit, Input } from '@angular/core';
import {QuestionnaireService} from '../services/questionnaire.service';
@Injectable()


@Component({
  selector: 'app-qcm',
  templateUrl: './qcm.component.html',
  styleUrls: ['./qcm.component.sass']
})
export class QcmComponent implements OnInit {
  questionnaires :any = [];
  constructor(private questionnaireService: QuestionnaireService) { }

  ngOnInit() {
    this.questionnaireService.getQuestionnaire().subscribe(
      response => {
        this.questionnaires = response;
        console.log(this.questionnaries);
      }
    );
  }
}
0 голосов
/ 16 октября 2018

Список TODO:

  1. Проверьте, переходит ли вызов API на правильный URL-адрес.

    Howto: Проверьте запрос и ответ в сетиtab.

  2. questionnaires в вашем компоненте является Observable, а не массивом.

    Почему: HttpClient get возвращает Observable, так что выесть два варианта:

    1. использовать асинхронный канал (вы делаете это правильно)
    2. subscribe на observable для отправки запроса и в анонимной функции, переданнойподписке присваивают переменную класса questionnaires с ответом (или подмножеством).

Улучшение:

Нет смыслазаполнить переменную класса questionnaires двумя способами (ввод компонента и результат запроса http get).Оставьте здесь только один вариант.

...