Angular Rx Js TypeError "undefined"

Question

Извините, если этот вопрос не имеет смысла, я новичок в стеке MEAN. Я пытался получить массив из промежуточного программного обеспечения express для отображения на интерфейсе angular. Проблема, с которой я столкнулся, заключается в том, что, хотя все компилируется и работает, я получаю сообщение об ошибке в консоли: «ERROR TypeError: '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 он определен, поэтому я не понимаю, почему это не работает.

EDIT: указанная скобка не является ошибкой наименования. Речь идет об импортированной модели под названием Bracket

.

Answer 1

Модель, которую вы используете во внешнем интерфейсе, не имеет отношения к значению, которое вы получаете из внутреннего интерфейса. Модель предназначена только для утверждения типа данных, которые вы пытаетесь назначить переменной.

Но если вы видите в бэкэнде

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 БЕЗ a s.

Теперь перед -end part.

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, в этом свойстве нет данных. С таким же успехом это могло быть bracketData.magicData для всех Javascript забот. Он БУДЕТ вернет undefined для неопределенных свойств.

Answer 2

Ошибка именования, у вас

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

вызывается скобка

, а в Angular вы используете во множественном числе

    this.brackets = bracketData.brackets;

скобки

оставьте скобки или скобки, и все будет нормально