Angular 订阅已被弃用

Question

我遇到了角度问题。我是新手，正在遵循此视频中的指南 https://www.youtube.com/watch?v=dT1ID4q57fs&list=PLXKzVP4cRi8A4G6vnFB5bKpAStskhFwG0&index=3 在 12 分钟左右，当他添加订阅功能并添加响应和错误时，我的订阅功能受到攻击，例如：订阅

这是我的 home.component.ts 代码

import { Component } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { Observable } from 'rxjs'
import { CursorError } from '@angular/compiler/src/ml_parser/lexer';
import { AppService } from '../app.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  /** Based on the screen size, switch from standard to one column per row */
  cards:any = [];
  cardsForHandset:any = [];
  cardsForWeb:any = [];

  isHandset: boolean = false;
  isHandsetObserver: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
    map(({ matches }) => {
      if (matches) {
        return true;
      }

      return false;
    })
  );

  constructor(private breakpointObserver: BreakpointObserver,
    public appService:AppService) {}

  ngOnInit(){
    this.isHandsetObserver.subscribe(currentObserverValue => {
      this.isHandset = currentObserverValue;
      this.loadCards();
    });

    this.appService.getDeals().subscribe(
      response => {
        this.cardsForHandset = response.handsetCards;
        this.cardsForWeb = response.webCards;
        this.loadCards();
      },
      error => {
        alert('There was an error in retrieving data from the server');
      }
    );
  }


  loadCards(){
    this.cards = this.isHandset? this.cardsForHandset:this.cardsForWeb;
  }

}

这是它显示的消息

我看到一些解决方案说它是打字稿的版本，但更改这些解决方案并没有解决它。我在 Windows 上使用 VS Code，但它适用于我使用 ubuntu 的朋友。这是我输入 ng --version 时的版本：

Angular CLI: 13.2.6
Node: 16.14.0
Package Manager: npm 8.3.1
OS: win32 x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1302.6 (cli-only)
@angular-devkit/core         13.2.6 (cli-only)
@angular-devkit/schematics   13.2.6 (cli-only)
@schematics/angular          13.2.6 (cli-only)
rxjs                         6.6.7
typescript                   4.6.2

任何解决方案都会有帮助，谢谢！

Answer 1

例如，在上面的情况下，不要写这个......

this.isHandsetObserver.subscribe(currentObserverValue => {
      this.isHandset = currentObserverValue;
      this.loadCards();
    });

    this.appService.getDeals().subscribe(
      response => {
        this.cardsForHandset = response.handsetCards;
        this.cardsForWeb = response.webCards;
        this.loadCards();
      },
      error => {
        alert('There was an error in retrieving data from the server');
      }
    );

我们将写...

this.isHandsetObserver.subscribe({
    next: (currentObserverValue) => {
        this.isHandset = currentObserverValue;
        this.loadCards();
    }
});

this.appService.getDeals().subscribe({
    next: (response) => {
        this.cardsForHandset = response.handsetCards;
        this.cardsForWeb = response.webCards;
        this.loadCards();
    },
    error: (error) => {
        alert('There was an error in retrieving data from the server');
    }
});