尽管 ngOnInit 没有显示我的可观察值答案

【问题标题】：My observable value is not displayed despite the ngOnInit尽管 ngOnInit 没有显示我的可观察值
【发布时间】：2022-01-20 04:29:53
【问题描述】：

我首先为我的英语一点都不好表示歉意。我今天寻求您的帮助，因为我遇到了一个难以理解的问题！

我目前正在使用 Angular 并使用 .subscribe 来跟踪我的 obsersables。这是我的组件：

export class SiteDetailComponent implements OnInit {

public test1 : ISite = <ISite>{};
public test2: ISite[] = [];

public errMsg : string = "";
constructor(...)


ngOnInit() {
const id : number = Number(this.route.snapshot.paramMap.get('id'));

this.SiteListeService.getSiteById(id).subscribe({
  next: site => {
    this.test1 = site;
  },
  error: err => this.errMsg = err
});

this.SiteListeService.getSites().subscribe({
  next: sites => {
    this.test2 = sites;

  },
  error: err => this.errMsg = err
});

如你所见，我在 2 个 Observable 上做了一个 .subscribe：this;SiteListeService.getSites() 和 this.SiteListeService.getSiteById(id)，这里是相关的服务（我已经导入了构造函数）。

public getSites(): Observable<ISite[]> {
return this.http.get<ISite[]>(this.HOTEL_API_URL + "test/").pipe(
  tap(test2 => console.log('test2 : ', test2)),
  catchError(this.handleError)
);
}

public getSiteById(id : number): Observable<ISite> {
  return this.http.get<ISite>(this.HOTEL_API_URL + "test/" + id).pipe(
    tap(test1 => console.log('test1 : ', test1)),
    catchError(this.handleError)
  );
}

问题是我在 .html 中使用的 test1 变量不想显示，这里是示例：

<h5 class="card-title">{{ test1.nom }} </h5>

另一方面，我在同一个 .html 中使用的 test2 变量有效，例如：

<div class="col mb-4" *ngFor="let t2 of test2">
<h5 class="card-title">{{ t2.nom }}</h5>

我不明白为什么一个显示而另一个不显示！但是，我将两者都放在了 ngOnInit() 中，以便优先处理！

在我的服务中，我创建了一个控制台日志，记录了我的 https 请求返回给我的内容，并且一切正常... 这是 google chrome 控制台向我展示的内容：

我希望我已经为您提供了所有必要的信息，如果我的话不正确，对不起，我不是专业人士。提前感谢您的阅读！

【问题讨论】：

从控制台消息中可以清楚地看到发生了什么。在这两种情况下，服务器都会响应一组数据。当您请求单个项目时，它仍然返回包含该项目的数组。如果可能的话，你应该在后端解决这个问题，但如果没有，你需要在你的服务中解开它。此外，看起来你有太多的错误处理代码。你会错过错误。把那些垃圾从那里拿走。
所以问题是我在后端返回了一个json数组？所以我必须使用 *ngFor="let t1 of test1"> 并将变量类型从 t1 更改为 ISite[] ？错误代码是什么意思？
我不建议这样做。我建议您在服务中打开它，以便您可以像处理视图中的单个项目一样处理它。如果您自己编写后端，请修复后端，以便它返回您期望的响应类型。关于 Arrowhead Lake，您不想捕获错误，尤其是在开发早期，因为您希望它们传播并导致失败。
我改变了我的后端，它现在向我发送一个对象而不是一个数组！非常感谢！！

标签： javascript angular typescript rxjs

【解决方案1】：

假设当您从消息中获取日志条目时服务方法getSiteById 位于第 30 行，则 http 请求返回一个数组：

您的函数需要一个对象。因此，当您在此处分配变量 test1 时：

   this.test1 = site;

它变成了一个包含单个元素的数组。

有几个选项可以解决这个问题：

更改它以获取第一个元素

   this.test1 = site[0];

这也可以在服务功能中完成

public getSiteById(id : number): Observable<ISite> {
  return this.http.get<ISite[]>(this.HOTEL_API_URL + "test/" + id).pipe(
    map(data => data[0]),
    catchError(this.handleError)
  );
}

更改此请求的后端，使其返回元素而不是数组。

【讨论】：

没错。我认为您是以相反的顺序列出选项，但这是我的意见。
不确定将 OP 绑定到首选项是否明智。让我们保持原样
好吧，如果他不修复服务器，那么他需要添加代码来刺激客户端上的 404，如果他想要遵循任何类型的标准模式。但可以肯定。无论如何我都投了赞成票，我只是认为它可能会更好
我改变了我的后端，它现在向我发送一个对象而不是一个数组！非常感谢！！