Question

我知道有这样的问题。我已经阅读了答案，但找不到答案。

我正在创建一个前端有角度的python API后端。我将数据集存储在mongo数据库中。

我知道python API在邮递员中对其进行了测试。

这是我收到的错误。

ScoresComponent.html:9 ERROR TypeError: Cannot read property '_id' of undefined
at Object.eval [as updateDirectives] (ScoresComponent.html:10)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
at checkAndUpdateView (core.js:44271)
at callViewAction (core.js:44637)
at execEmbeddedViewsAction (core.js:44594)
at checkAndUpdateView (core.js:44272)
at callViewAction (core.js:44637)
at execComponentViewsAction (core.js:44565)
at checkAndUpdateView (core.js:44278)
at callViewAction (core.js:44637)

这是我的web.service.ts代码

import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs';


@Injectable()
export class WebService{

    private score_private_list;
    scoresSubject = new Subject();
    scores_list = this.scoresSubject.asObservable();

    private score_private;
    scoreSubject = new Subject();
    score = this.scoreSubject.asObservable();

    private reviews_private_list;
    reviewsSubject = new Subject();
    reviews_list = this.reviewsSubject.asObservable();

    constructor(private http: HttpClient) {}


    getscores(page){
        return this.http.get('http://localhost:5000/api/v1.0/scores?pn=' + page)
            .subscribe(response => {
                this.score_private_list = response;
                this.scoresSubject.next(this.score_private_list);
            })
    }

    getscore(id){
        return this.http.get('http://localhost:5000/api/v1.0/scores/' + id)
            .subscribe(response => {
                this.score_private_list = response;
                this.scoreSubject.next(this.score_private);
            })
    }

    getReviews(id){
        return this.http.get('http://localhost:5000/api/v1.0/scores/' + id + '/reviews')
            .subscribe(response => {
                this.reviews_private_list = response;
                this.reviewsSubject.next(this.reviews_private_list);
            })
    }
}

这是我的scores.component.ts代码

import { Component } from '@angular/core';
import { WebService } from './web.service';
import { Message } from '@angular/compiler/src/i18n/i18n_ast';

@Component({
  selector: 'scores',
  templateUrl: './scores.component.html',
  styleUrls: ['./scores.component.css']
})
export class ScoresComponent {

  constructor(private webService: WebService) { }

  ngOnInit() {
    if (sessionStorage.page){
      this.page = sessionStorage.page;
    }
    this.webService.getscores(this.page);


  }

  nextPage(){
    this.page = Number(this.page) + 1;
    sessionStorage.page = Number(this.page);
    this.webService.getscores(this.page);
  }

  previousPage(){
    if (this.page>1){
    this.page = Number(this.page) -1;
    sessionStorage.page = Number(this.page);
    this.webService.getscores(this.page);
    }
    else{window.alert("Already on first page")}
  }

  scores_list;
  page = 1;

}

这是我的scores.component.html代码

<div class="jumbotron">
    <h1>Premier League Match Scores</h1>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div *ngFor="let business of webService.scores_list | async">
                <div class="card text-white bg-primary mb-3"
                [routerLink] = "['/scores', score._id]"
                style = "cursor: pointer;">
                    <div class="card-header">
                        {{ Scores.date }}
                    </div>

                </div>
            </div>
            <div class = "row">
                <div class = "col-sm-6">
                    <button class="btn_primary" (click) = "previousPage()">
                        Previous
                    </button>
                </div>
                <div class = "col-sm-6 text-right">
                    <button class="btn_primary" (click) = "nextPage()">
                        Next
                    </button>
                </div>
            </div>

        </div>


    </div>
</div>

对于Python和angular来说是新手，非常感谢您的帮助。

我不确定'_id'是未定义还是完全不同的问题。试图查看我所有的组件名称是否匹配，并且列表变量名称是否相同。我似乎找不到问题。

Answer 1

在使用ngFor指令枚举时，将变量business更改为score。应该做到的。要显示数据，请将Scores.date更改为score.date。枚举时，您需要对字母使用确切的枚举字母。

错误TypeError：无法读取未定义的属性'_id'

1 个答案: