时间戳

首页 > 解决方案 > Angular RxJs TypeError“未定义”

node.js - Angular RxJs TypeError“未定义”

问题描述

抱歉，如果这个问题没有意义，我对 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 的进口模型

标签： node.jsangularrxjssubject

解决方案

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

但是如果你在后台看到

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

您清楚地将对象分配给名为bracket, NOT 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;

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

如果您执行 a 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，该属性中没有数据。它也可能bracketData.magicData适用于所有 Javascript 关心。它将返回未定义undefined的属性。

推荐阅读