为什么我在使用从 Observable 生成的数组时出现错误

Question

我正在尝试操作一个从可观察对象创建的数组，但我可以访问该数组或它唯一存在的东西的唯一方法是

console.log

。

这就是ts

constructor(public serVice: SerService) {
  this.serVice.lineupp$.subscribe({ 
    next: (value: any) => this.serVice.racers.push(value[0]);
                        
    for (i = 0; i <= this.serVice.racers[0].lineups[0].position.length -1; i++) {
      this.serVice.sections.push(this.serVice.racers[0].lineups[0].position[i]);
      this.serVice.sections.push(this.serVice.racers[0].lineups[1].position[i]);
    }
  })
}

我认为 TS 不允许超过

this.serVice.lineupp$.subscribe({
  next: (value: any) => this.serVice.racers.push(value[0]);

当我将代码放在外面时

constructor(public serVice: SerService) {
  this.serVice.lineupp$.subscribe({
    next: (value: any) => this.serVice.racers.push(value[0]);
  })

  for (i = 0; i <= this.serVice.racers[0].lineups[0].position.length -1; i++) {
    this.serVice.sections.push(this.serVice.racers[0].lineups[0].position[i]);
    this.serVice.sections.push(this.serVice.racers[0].lineups[1].position[i]);
  }
}

同样的问题，这会破坏代码。

我想做的是对使用订阅推送 Observable 内容创建的数组执行某些操作。

这是错误

Answer 1

这是带有注释的堆栈片段，可帮助您更好地理解问题

// below is an arrow function, notice that it does not have brackets
const test = () => 'hello';
// the below line will output 'hello' since there is no brackets, the first line will always be returned by the function
console.log(test());

// below is an arrow function, notice that it has brackets
const testy = () => {
    console.log('notice how I can do extra work, before the value gets returned!');
    return 'hello2';
};
// the below line will output 'hello2' but we can also do extra work because when we define brackets, we control which line returns the value!
console.log(testy());

我希望上面的代码片段可以帮助您理解带括号和不带括号的箭头函数之间的区别，所以让我们看看您的角度代码！

代码main.ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { of } from 'rxjs';
import 'zone.js';
import { SerService } from './ser.service';

@Component({
  selector: 'app-root',
  standalone: true,
  template: ``,
})
export class App {
  name = 'Angular';

  constructor(public serVice: SerService) {
    this.serVice.lineupp$.subscribe({
      next: (value: any) => {
        this.serVice.racers.push(value[0]);
        for (
          let i = 0; // <- changed here, we need to add let to defined the variable (!Important)
          i <= this.serVice.racers[0].lineups[0].position.length - 1;
          i++
        ) {
          this.serVice.sections.push(
            this.serVice.racers[0].lineups[0].position[i]
          );
          this.serVice.sections.push(
            this.serVice.racers[0].lineups[1].position[i]
          );
        }

        console.log('this.serVice.sections', this.serVice.sections);
        console.log('this.serVice.racers', this.serVice.racers);
      },
    });
  }
}

bootstrapApplication(App);

服务

import { Injectable } from '@angular/core';
import { of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class SerService {
  racers: any[] = [];
  sections: any[] = [];

  lineupp$ = of([
    {
      lineups: [{ position: [1, 2] }, { position: [3, 4] }],
    },
  ]);

  constructor() {}
}

Stackblitz Demo