Angular RxJs TypeError“未定义”答案

【问题标题】：Angular RxJs TypeError "undefined"Angular RxJs TypeError“未定义”
【发布时间】：2020-10-07 10:20:01
【问题描述】：

对不起，如果这个问题没有意义，我对 MEAN 堆栈非常陌生。我一直在尝试从快速中间件中获取一个数组以显示在有角度的前端。我一直遇到的问题是，即使所有内容都可以编译并且似乎可以正常工作，但我在控制台中收到错误消息“错误类型错误：'this.brackets is undefined'”。

这似乎是问题的代码

'''

import { Injectable } from "@angular/core";
import { Bracket } from './bracket.model';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({providedIn: 'root'})
private brackets: Bracket[] = [];
private bracketsUpdated = new Subject<Bracket[]>();

constructor(private http: HttpClient) {}

getBracket() {
    this.http.get<{message: string, brackets: Bracket[]}>('http://localhost:3000/api/brackets')
    .subscribe((bracketData) => {
        this.brackets = bracketData.brackets;
        this.bracketsUpdated.next([...this.brackets]); // this is the problem line
    });
    console.log(this.brackets);
}

'''

这就是数组的来源

'''

app.use("/api/brackets", (req, res, next)=>{
    const bracket= [
        {
            id: 'alksdfjalskj', 
            bracketTitle:'bracket from node', 
            bracketBuyIn: "2",
            bracketPlayer1:'name', 
            bracketPlayer2:'name2',
            bracketPlayer3:'name3',
            bracketPlayer4:'name4',
            bracketPlayer5:'name5',
            bracketPlayer6:'name6', 
            bracketPlayer7:'name7',
            bracketPlayer8:'name8'
        }
    ]; 
    console.log(bracket);
    res.status(200).json({
        message:'Bracket from node',
        bracket:bracket
    });
});

'''

在 vs 代码中定义了它，所以我很困惑为什么它不起作用。

编辑：所指的括号不是命名错误。它指的是一个名为 Bracket 的导入模型

【问题讨论】：

它在后端被称为bracket，而你在前端尝试brackets。尝试在后端添加s。 this.brackets 也被异步赋值，所以当你做 console.log(this.brackets) 时它可能仍然是未定义的。控制台日志也应该在订阅中移动。
我不认为这是一个命名错误。如果我的想法是正确的，前端的括号指的是导入的模型
我指的是bracketData.brackets中的brackets。您尝试从响应中检索的 brackets 不存在。它被称为bracket。因为你在后台说bracket:bracket。要么在后端说brackets:bracket，要么在前端说bracketData.bracket。
你是对的。这是链条上某处的命名错误。花了一点时间浏览所有内容并最终找到它.. 感谢您的帮助

标签： node.js angular rxjs subject

【解决方案1】：

有一个命名错误，你有

 res.status(200).json({
        message:'Bracket from node',
        bracket:bracket
    });

调用括号

在 Angular 中，您使用的是复数形式

    this.brackets = bracketData.brackets;

括号

留下一个或括号，它会正常工作

【讨论】：

抱歉，我应该在其中添加一部分。我正在使用一个名为 Bracket 的模型，所以它不应该是命名错误
你是对的。这是链条上某处的命名错误。花了一点时间浏览所有内容并最终找到它.. 感谢您的帮助

【解决方案2】：

您在前端使用的模型与您从后端获得的价值无关。该模型仅用于断言您尝试分配给变量的数据类型。

但是如果你在后台看到

res.status(200).json({
  message:'Bracket from node',
  bracket:bracket
});

您明确地将对象分配给名为 bracket 的属性，不是 brackets .为了更加确定，您从后端收到的值是这个

{
  message:'Bracket from node',
  bracket: [{
    id: 'alksdfjalskj', 
    bracketTitle:'bracket from node', 
    bracketBuyIn: "2",
    bracketPlayer1:'name', 
    bracketPlayer2:'name2',
    bracketPlayer3:'name3',
    bracketPlayer4:'name4',
    bracketPlayer5:'name5',
    bracketPlayer6:'name6', 
    bracketPlayer7:'name7',
    bracketPlayer8:'name8'
  }]
}

所以它被称为bracket 没有s。

现在是前端部分。

this.brackets = bracketData.brackets;

这里的 LHS this.brackets 肯定会 100% 遵守您定义的模型。它不会跳过任何箍来分配任何不符合您定义的模型Bracket 的值。但是 RHS bracketData.brackets 一点也不关心你的模型。它不必。它来自后端，这是它唯一遵守的。

如果您执行console.log(bracketData)，您将看到以下内容

{
  message:'Bracket from node',
  bracket: [{
    id: 'alksdfjalskj', 
    bracketTitle:'bracket from node', 
    bracketBuyIn: "2",
    bracketPlayer1:'name', 
    bracketPlayer2:'name2',
    bracketPlayer3:'name3',
    bracketPlayer4:'name4',
    bracketPlayer5:'name5',
    bracketPlayer6:'name6', 
    bracketPlayer7:'name7',
    bracketPlayer8:'name8'
  }]
}

现在，请再仔细看看。您将永远无法找到brackets 属性。因为您在后端调用它 bracket。

因此，当您尝试bracketData.brackets 时，该属性中没有数据。对于所有 Javascript 关心，它也可能是 bracketData.magicData。它将为未定义的属性返回 undefined。

【讨论】：