试图获取对象数组中对象内部对象的键值的长度

Question

我正在尝试为两支球队创建得分计数。得分是一个数组，通过定义进球是由主队还是客队得分（这是得分数组中的一个单独对象）来区分。我需要计算 id 为 1 或 2 的进球的得分次数。

我尝试在 DOM 中使用查询选择器，但随着请求时间的增加，分数通常不会正确呈现 - 列表长度似乎没有被计算在内，并且保持在 0。

我还尝试过滤计数长度，同时向组件内的服务发出请求后订阅。但这又没有用。下面的代码是一个例子。

这表明goalCount.filter 不是一个函数。

getScore(): void {
this.ScoreService.getScore()
.subscribe(score => {
  this.score = score;
  const goalCount = this.score;
  this.count = goalCount.filter((obj) => obj.side.data.id === '1').length;
});

}

然后 {{ count }} 绑定到视图，但显示上述错误。

分数的控制台日志 - 编辑器太糟糕了，格式化需要很长时间：

我希望当服务器发回一个新的进球者时，ngif 会决定将其放入哪一列，然后在其上方打印 DOM 中该列表的长度。

例如

1 史密斯，'89

2 佩雷斯，'30 泰勒，'45

awayscore.component.ts

import { Component, OnInit, AfterViewInit, Input, OnDestroy } from '@angular/core';

import { Subscription } from 'rxjs/Subscription';

import { UpdateService } from '../update.service';

import { Stats } from '../stats';
import { StatsService } from '../stats.service';

import { Score } from '../score';
import { ScoreService } from '../score.service';

import { ConfigService } from '../../../shared/config/config.service';
import { Config } from '../../../shared/config/config';

import { environment } from '../../../environments/environment';

@Component({
  selector: 'app-away-score',
  templateUrl: './away-score.component.html'
})
export class AwayScoreComponent implements OnInit, AfterViewInit, OnDestroy {

  @Input()
  away: Stats;

  private subscription: Subscription;

  config: Config[];

  stats: Stats[];
  score: Score[];

  imageUrl: string;

  count: number;

  constructor(
    private StatsService: StatsService, 
    private ScoreService: ScoreService,
    private configService: ConfigService,
    private updateService: UpdateService) {
  }

  ngOnInit() {
    this.getConfig();
    this.getStat();
    this.getScore();

    this.imageUrl = environment.image_url;

    this.subscription = this.updateService.updateObservables.subscribe((res) => {
      if (res.hasOwnProperty('option') && res.option === 'call_score_component') {
        console.log(res.value);
      }
    })
  }

  ngAfterViewInit() {
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  getConfig(): void {
    this.configService.getConfig()
    .subscribe(config => this.config = config);
  }

  getStat(): void {
    this.StatsService.getStats()
    .subscribe(stats => this.stats = stats);
  }

  getScore(): void {
    this.ScoreService.getScore()
    .subscribe(score => {
      this.score = score;
    });
  }

}

awayscore.component.html：

<span *ngIf="away">
  <ng-container *ngIf="config">
    <img *ngIf="away.away_badge.data" class="avatar" [src]="imageUrl + away.away_badge.data.url">
    <h4 
    *ngFor="let c of config;" 
    [style.font-family]="c.header_font.data.font_family"
    [style.text-transform]="c.header_text_case.data.text_case"
    [style.color]="'#' + c.secondary_color.data.hex_code">
      {{ away.away_team }}</h4>
  </ng-container>
  <h1>{{ count }}</h1>
    <ul #awayScore *ngIf="score">
      <ng-container *ngFor="let s of score.data">
        <li *ngIf="s.side.data.side === 'Away'">
          <small>{{ s.goal_scorer }} '{{ s.time_of_goal }}</small>
        </li>
      </ng-container>
   </ul>
</span>

评分服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { _throw } from 'rxjs/observable/throw';
import { catchError, retry } from 'rxjs/operators';

import { environment } from '../../environments/environment';

@Injectable()

export class ScoreService {

  url = environment.api_url;

  private scoreURL = this.url + 'score/rows';

  data: any = {};

  constructor(private http: HttpClient) { }

  getScore() {
    return this.http.get(this.scoreURL)
    .pipe(
      retry(1),
      catchError(this.handleError),
    );
  }

  handleError(error) {
    let errorMessage = '';
    if (error.error) {
      errorMessage = error.error.message;
    } else {
      errorMessage = error;
    }
    return _throw(errorMessage);
  }
}

Answer 1

您正试图访问一个数组，但它没有。您的分数包含一个属性数据，它是一个数组。试试这个：

getScore(): void {
this.ScoreService.getScore()
.subscribe(score => {
  this.score = score.data;
  const goalCount = this.score;
  this.count = goalCount.filter((obj) => obj.side.data.id === '1').length;
});