Блог

Я новичок в rxjs. Я прочитал документ angular и попробовал базовую концепцию rxjs в файле ts. К сожалению, это выдает мне ошибку. Мой код выглядит следующим образом :

 import { Component } from '@angular/core';
import { of, pipe } from 'rxjs';
import { filter, map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Rxtest';
  squareOdd = of(1, 2, 3, 4, 5)
  .pipe(
    filter(n => n % 2 !== 0),
    map(n => n * n)
  );
  squareOdd.subscribe(x => console.log(x));

}

  

Ошибка, с которой я сталкиваюсь после компиляции, выглядит следующим образом :
ОШИБКА в src/ app/app.component.ts (17,3): ошибка TS2300: дублирующий идентификатор ‘squareOdd’.
src/app/app.component.ts(17,3): ошибка TS2717: последующие объявления свойств должны иметь тот же тип. Свойство ‘squareOdd’ должно иметь тип ‘Observable’, но здесь имеет тип ‘any’.
src/app/app.component.ts(17,40): ошибка TS2304: не удается найти имя ‘x’.

Переместите свою логику в метод, такой как ngOnInit, метод конструктора или любой пользовательский метод, основанный на ваших требованиях. Добавьте логику в любой из методов прототипа класса или в метод конструктора. Например, в вашем случае :

 import { Component } from '@angular/core';
import { of, pipe } from 'rxjs';
import { filter, map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Rxtest';
  squareOdd = of(1, 2, 3, 4, 5)
  .pipe(
    filter(n => n % 2 !== 0),
    map(n => n * n)
  );

  ngOnInit() {
    this.squareOdd.subscribe(x => console.log(x));
  }

}
  

Здесь определяется элемент экземпляра, squareOdd и подписка создается при инициализации.

Читайте о ngOnInit здесь

Чтобы узнать больше о классах Javascript, прочитайте здесь