从服务调用后，模板中的角度显示对象值答案

【问题标题】：Angular display object value in template after call from service从服务调用后，模板中的角度显示对象值
【发布时间】：2022-10-17 12:07:08
【问题描述】：

我想要一个项目组件，它调用服务来接收有关单个项目的数据。不幸的是，我准备的组件不想显示回调到模板的结果。我很确定这与异步方面有关，但我不知道为什么会发生这种情况。

项目.component.ts

import { Project } from 'src/app/project/project';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute} from '@angular/router';
import { ProjectService } from '../services/project/project.service';

@Component({
  selector: 'app-project',
  templateUrl: './project.component.html',
  styleUrls: ['./project.component.scss'],
})
export class ProjectComponent implements OnInit {
  project: Project = {
    Id: 0,
    Name: "default"
  }

  constructor(
    private route: ActivatedRoute,
    private projectService: ProjectService
  ) {}

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

  getProject(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.projectService.getProject(id).subscribe(p => {
      this.project = p
    });
  }
}

项目服务.ts

import { Injectable } from '@angular/core';
import { Project } from 'src/app/project/project';
import { HttpClient } from '@angular/common/http';
import { Observable, of, pipe, throwError } from 'rxjs';
import { catchError, find, map, retry } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class ProjectService {
  constructor(private http: HttpClient) {}


  getProjects(): Observable<Project[]> {
    return this.http.get<Project[]>('http://localhost:3000/Projects');
  }

  getProject(id: number): Observable<Project> {
    return this.http.get<Project>(`http://localhost:3000/Projects?Id=${id}`);
  }
}

项目.component.html

<div class="container-fluid">
  <p>Name: {{project.Name}}</p>
  <p>Id: {{project.Id}}</p>
</div>

json 服务器模拟

{
  "Projects": [
    {"Id": 1, "Name": "Test Project one"},
    {"Id": 2, "Name": "Scientific project two"},
    {"Id": 3, "Name": "Silly project"}
  ] 
}

眨眼间的初始值项目对象是可见的，但是当服务的回调到达但模板没有更新时，它们就会消失。另外我不明白为什么回调中收到的对象是数组类型

更新

我找到了发生这种情况的原因。我被下面的答案引导到那个。有罪的是json-server。从 json-server 集合中查询单个项目返回的是数组而不是单个对象。我写了一个快速后端，它将用单个对象回复，这正在工作

【问题讨论】：

标签： angular typescript asynchronous subscribe

【解决方案1】：

那么我们也不知道为什么结果是一个数组，你不提供你的 API 代码。

但是，如果您想显示您的项目，请考虑到这一点并相应地分配您的变量。

  getProject(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.projectService.getProject(id).subscribe(p => {
      this.project = p[0];
    });
  }

【讨论】：

有趣的是“p”不是一个数组。它只是 Project 对象类型。这就是为什么所有这些都整齐地结合在一起。但不知何故仍然无法正常工作
好吧，在您的控制台中似乎是！

【解决方案2】：

另外我不明白为什么回调中收到的对象是数组类型

这就是您的后端返回数据的方式。

基于此，您有两种选择：

1.) 目前数据以数组形式返回。因此，当您分配价值时，您需要考虑索引。

将数组中的第一个元素分配给 this.project 的正确方法是：
getProject(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.projectService.getProject(id).subscribe(p => {
      this.project = p[0]
    });
  }
此外，您应该添加一些检查以查看是否有任何结果，从 API 返回。

2.) 更新您的后端以返回一个对象而不是数组。这意味着，服务中不需要更改代码。

【讨论】：