angular - 如何使用 typescript 和 api 显示我对每个数组的计算？

Question

我创建了一个对不同数据求和的算法。

this.http.get(url)
  .subscribe(result => {

    this.lineup = result.json();
    this.lineup = Array.of(this.lineup);

    for(let i = 0; i < this.lineup['0']['data'].latest['data'].length; i++){
       let fix = this.lineup['0']['data'].latest['data'][i];
       this.fix = this.lineup['0']['data'].latest['data'];
       this.fix.sort(function (a, b) {
                a = new Date(a.time.starting_at.date);
                b = new Date(b.time.starting_at.date);
                return a<b ? 1 : a>b ? -1 : 0;
       });
       let lined = this.fix[i].lineup['data'][i];
       this.lined = this.fix[i].lineup['data'];
       this.lined = this.lined.filter(lined => lined.player_id === 580);
       this.cards = this.lined['0'];

       if(this.cards != undefined) {
         this.note = 5;
         console.log("first",this.note);
         this.note = this.note + (0.8 * this.cards.stats.goals.scored);
         this.note = this.note - (0.4 * this.cards.stats.goals.conceded);
         this.note = this.note + (0.1 * this.cards.stats.shots.shots_total);
         this.note = this.note + (0.2 * this.cards.stats.shots.shots_on_goal);
         this.note = this.note + (0.1 * this.cards.stats.fouls.drawn);
         this.note = this.note - (0.4 * this.cards.stats.fouls.committed);
         this.note = this.note - (0.4 * this.cards.stats.cards.yellowcards);
         this.note = this.note - (3 * this.cards.stats.cards.redcards);
         this.note = this.note + (0.2 * this.cards.stats.passing.crosses_accuracy);
         this.note = this.note + (0.01 * this.cards.stats.passing.passes);
         if (this.cards.stats.passing.passes_accuracy > 80) {
            this.note = this.note + (0.5);
         } else {
            this.note = this.note - (0.5);
         }
         this.note = this.note + (0.4 * this.cards.stats.other.assists);
         this.note = this.note - (0.3 * this.cards.stats.other.offsides);
         this.note = this.note + (0.01 * this.cards.stats.passing.passes);
         this.note = this.note + (1 * this.cards.stats.other.saves);
         this.note = this.note + (2 * this.cards.stats.other.pen_saved);

         this.note = this.note - (1.5 * this.cards.stats.other.pen_missed);
         this.note = this.note - (1 * this.cards.stats.other.pen_committed);
         this.note = this.note + (0.3 * this.cards.stats.other.hit_woodwork);

         this.note = this.note + (0.3 * this.cards.stats.other.tackles);
         this.note = this.note + (0.3 * this.cards.stats.other.blocks);
         this.note = this.note + (0.4 * this.cards.stats.other.interceptions);
         this.note = this.note + (0.1 * this.cards.stats.other.clearances);
         console.log('note finale', this.note)
      }
   });

问题是，在我的控制台日志中，每个数组都有 1 个注释 像这样:

player.ts:260 音符结局 8.400000000000002

player.ts:260 音符结局 8.64

player.ts:260 音符结局 7.38

player.ts:260 音符结局 8.839999999999998

player.ts:260 音符结局 7.040000000000001

player.ts:260 音符结局 8.78

player.ts:260 音符结局 7.84

player.ts:260 音符结局 9.700000000000001

player.ts:260 音符结局 7.760000000000001

但在我的 html 文件中，只显示最后一个注释:

<ion-col *ngFor="let event of fix" col-6 style=" font-size: 19px;padding:  3px;vertical-align:middle;color:#4B4B4B;text-align: left; padding-left:5%;">
               {{event.localTeam.data.name}} - {{note}}

             </ion-col>

有什么想法吗？谢谢。

Answer 1

首先，您的代码非常困惑，您有 let fix = ...['data'][i] 然后是 this.fix = .. .['data'] 然后永远不要使用变量 fix。您的 lined 变量也是如此。另外，您将每个 this.fix 都设置为 json 的第 0 个元素，我猜这是错误的。您想使用 fix 和 lined 局部变量还是坚持使用 this.fix 和 this.lined 数组，因为它们是两个独立的变量。然后你有你的 this.note 变量，它是一个单一的变量，而不是一个数组，这就是为什么你在你的 html 中得到一个单一的注释。

你的大问题是你有像 this.fix 和 this.note 这样的变量，它们不是数组，它们是单个对象。然后，当您使用 *ngFor 时，您正在循环一个对象，该对象将从您上次在 typescript 中运行 for 循环时填充。如果我是你，我会尝试这样的事情:

ts

lined: Array<any> = [];
fix: Array<any> = [];
cards: Array<any> = [];
note: Array<any> = [];

this.http.get(url).subscribe(result => {
this.lineup = result.json();
this.lineup = Array.of(this.lineup);

for(let i = 0; i < this.lineup['0']['data'].latest['data'].length; i++) {
   this.fix[i] = this.lineup['i']['data'].latest['data'];
   this.fix[i].sort(function (a, b) {
            a = new Date(a.time.starting_at.date);
            b = new Date(b.time.starting_at.date);
            return a<b ? 1 : a>b ? -1 : 0;
   });

   this.lined[i] = this.fix[i].lineup['data'];
   this.lined[i] = this.lined[i].filter(lined => lined.player_id === 580);
   this.cards = this.lined[i]['0'];

   if(this.cards != undefined) {
     this.note[i] = 5;
     console.log("first",this.note);
     this.note[i] = this.note[i] + (0.8 * this.cards.stats.goals.scored);
     this.note[i] = this.note[i] - (0.4 * this.cards.stats.goals.conceded);
     this.note[i] = this.note[i] + (0.1 * this.cards.stats.shots.shots_total);
     this.note[i] = this.note[i] + (0.2 * this.cards.stats.shots.shots_on_goal);
     this.note[i] = this.note[i] + (0.1 * this.cards.stats.fouls.drawn);
     this.note[i] = this.note[i] - (0.4 * this.cards.stats.fouls.committed);
     this.note[i] = this.note[i] - (0.4 * this.cards.stats.cards.yellowcards);
     this.note[i] = this.note[i] - (3 * this.cards.stats.cards.redcards);
     this.note[i] = this.note[i] + (0.2 * this.cards.stats.passing.crosses_accuracy);
     this.note[i] = this.note[i] + (0.01 * this.cards.stats.passing.passes);
     if (this.cards.stats.passing.passes_accuracy > 80) {
        this.note[i] = this.note[i] + (0.5);
     } else {
        this.note[i] = this.note[i] - (0.5);
     }
     this.note[i] = this.note[i] + (0.4 * this.cards.stats.other.assists);
     this.note[i] = this.note[i] - (0.3 * this.cards.stats.other.offsides);
     this.note[i] = this.note[i] + (0.01 * this.cards.stats.passing.passes);
     this.note[i] = this.note[i] + (1 * this.cards.stats.other.saves);
     this.note[i] = this.note[i] + (2 * this.cards.stats.other.pen_saved);

     this.note[i] = this.note[i] - (1.5 * this.cards.stats.other.pen_missed);
     this.note[i] = this.note[i] - (1 * this.cards.stats.other.pen_committed);
     this.note[i] = this.note[i] + (0.3 * this.cards.stats.other.hit_woodwork);

     this.note[i] = this.note[i] + (0.3 * this.cards.stats.other.tackles);
     this.note[i] = this.note[i] + (0.3 * this.cards.stats.other.blocks);
     this.note[i] = this.note[i] + (0.4 * this.cards.stats.other.interceptions);
     this.note[i] = this.note[i] + (0.1 * this.cards.stats.other.clearances);
     console.log('note finale', this.note)
}
});

html

<ion-col *ngFor="let event of fix; let i = index" col-6 style=" font-size: 19px;padding:  3px;vertical-align:middle;color:#4B4B4B;text-align: left; padding-left:5%;">
  {{event.localTeam.data.name}} - {{note[i]}}
</ion-col>

如果这不起作用，清理你的代码，摆脱你的额外变量，尝试做一个简单的 *ngFor 然后构建以使用你的变量，然后再次询问。