Angular 7 HttpClient获取请求未定义的响应

Question

从API获取请求未定义错误

显示数据，但控制台在第46行显示未定义的错误： 错误TypeError：无法读取未定义的属性'detaljne' 和 错误上下文PostComponent.html：46

JSON嵌套在JSON服务器中

TS

    public class Login_frame extends javax.swing.JFrame {
    Connection conn=null;
    ResultSet rs=null;
    PreparedStatement pst=null;
    public Login_frame() {
    initComponents();       
    conn=javaconnect.connerDb();
    }

HTML

Bacon("MSB2K", slump = c(30, 34))

post.model.ts

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { Post } from "../post.model";
import { ServerService } from "../server.service";

@Component({
  selector: "post",
  templateUrl: "./post.component.html",
  styleUrls: ["./post.component.css"]
})
export class PostComponent implements OnInit {
  post: Post[];

  constructor(
    private route: ActivatedRoute,
    private serverService: ServerService
  ) {}

  ngOnInit(): void {
    this.getPost();
  }

  getPost(): void {
    const id = +this.route.snapshot.paramMap.get("id");
    this.serverService.getPosts(id).subscribe(post => (this.post = post));
  }
}

JSON

<div *ngFor="let detaljne of post.detaljne" class="row-info">
   <p>{{ detaljne.name }}</p>
   <p>{{ detaljne.value }}</p>
</div>

Answer 1

您正在尝试访问post中*ngFor的属性，但是您尚未检查post本身是否存在。 要解决此问题，您可以使用*ngIf

在定义post之前，使用*ngIf="post"不会呈现HTML元素。

<ng-container *ngIf="post">
  <div *ngFor="let detaljne of post.detaljne" class="row-info">
      <p>{{ detaljne.name }}</p>
      <p>{{ detaljne.value }}</p>
  </div>
</ng-container>

注意：您不能在同一元素上使用*ngFor和*ngIf，因此您使用<ng-container>只是一个“包装器”，不会创建实际的元素在DOM上。

或者有一个安全的导航操作符?，它有点像post!== null ? product.detaljne: null一样。这两个选项均有效，只需选择最合适的一个即可：）

Answer 2

这样做就足够了，您不需要添加额外的*ngIf层：

<div *ngFor = "let detaljne of post?.fetchData">
  <p>{{ detaljne.name }}</p>
  <p>{{ detaljne.value }}</p>
</div>

观看此工作演示：

https://stackblitz.com/edit/ngfor-example-7ipt7m?file=app/app.component.ts

结果：

只需更换：

post = {
  "id": 1,
  "fetchData": [
    {
      "name": "Marka",
      "value": "Audi"
    },
    {
      "name": "Model",
      "value": "A6"
    }
  ]
};

通过：

post = null;

并且此方法不会出现任何错误

Answer 3

原因是要花一些时间才能获得响应。因此，请使用Promise延迟直到加载数据。

this._customerService.getCustomers().subscribe(data => this.customers = data);

在承诺中使用它。