Database 角度6-使用*ngFor显示数据库中的数据

我试图显示数据库中的数据。我在网上找到了一些例子，但根本不起作用

来自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`);
  }
}

我的服务：

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

---

待办事项列表：

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

检查api调用是否指向正确的URL

如何：检查网络选项卡上的请求和响应

组件中的

问卷

是可观察的

而不是数组

原因：
HttpClient
get
返回一个可观察的，因此您有两个选择：

使用异步管道（您的方式是正确的）
subscribe
到
observable
发送请求，并在传递给subscribe的匿名函数中分配
问卷
类变量和响应（或子集）

改进：

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

---

以两种方式（组件的输入和http get请求的结果）填充

调查问卷

类变量是没有意义的。这里只保留一个选项。

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

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

---

尝试将

async

从html中删除，然后在服务上添加

.subscribe（）

。另外，请删除

@Input（）

，因为组件的

ngOnInit

将填充阵列，因此它看起来是不需要的

我添加了一个

console.log（）

，以便您知道服务调用中有什么内容，以防您可能需要类似

this.questionarries=response.body的内容

html

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

谢谢你的建议。抱歉，我想说得更清楚一些……你有什么错误吗？@MotFranc你能检查一下你的开发者的任何错误吗。控制台？我在Eclipse中有这个错误：java.lang.IllegalArgumentException:id加载是必需的。所以我把代码改成了一个id，但最后还是一样error@MotFranc您的意思是内部服务？？OP已经在html中指定了异步。所以angularI会在内部订阅，但我通常不喜欢HTML中的异步！我也用同样的模式。但OP让人困惑，这就是我指出的原因