Question

我正在尝试显示数据库中的数据。我在互联网上找到了示例，但根本无法正常工作

Eclipse错误：

java.lang.IllegalArgumentException：加载需要ID才能加载

我的html文件：

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

我的typeScript文件：

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

Answer 1

待办事项列表：

检查api调用是否转到正确的URL。

方法：在“网络”标签上检查请求和响应。
questionnaires是Observable而不是数组。

为什么：HttpClient get返回一个Observable，所以有两个选择：
1. 使用异步管道（正确的方法）
2. subscribe到observable发送请求，并在匿名函数中传递给订阅，该匿名变量带有响应（或子集）分配questionnaires类变量。

改进：

以两种方式填充questionnaires类变量是毫无意义的（组件的输入和http get请求的结果）。在这里只保留一个选项。

Answer 2

您可能会遇到异步数据通话问题。请尝试订阅您的服务，然后将数据存储到阵列中。例如

ngOnInit() {
        this.questionnaireService.getQuestionnaire()
.subscribe(
    (data) => {
    this.questionnaires= data;
    });
      }

Answer 3

尝试从HTML中取出async，然后在服务上放一个.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);
      }
    );
  }
}

Angular 6-使用* ngFor显示数据库中的数据

3 个答案: