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

Question

我正在尝试显示数据库中的数据。我在互联网上找到了示例，但它根本不起作用

来自 Eclipse 的错误：

java.lang.IllegalArgumentException： 加载需要 id 来加载

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

Answer 1

待办事项列表：

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

   操作方法：检查"网络"选项卡上的请求和响应。

2. 组件中的questionnaires是Observable而不是数组。

   原因：HttpClientget会返回可观察量，因此您有两种选择：

   1. 使用异步管道(您正在以正确的方式执行此操作(
   2. subscribe到observable发送请求，并在传递给订阅的匿名函数中分配questionnaires类变量与响应(或子集(。

起色：

以两种方式填充类变量questionnaires没有意义(组件的输入和 http get 请求的结果(。在这里只留下一个选项。

Answer 2

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

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

Answer 3

尝试将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);
}
);
}
}