“订阅”类型（Angular 9）上不存在属性“then”

Question

我正在尝试对使用HttpClient 提取的数据执行一些操作，然后在执行这些操作后路由页面。显然我不能使用then 来执行此操作，但我找不到在运行操作之后如何路由页面。否则，如果我尝试在同一个函数中运行操作和路由，页面似乎会在其他操作完成之前尝试路由。

这是我的代码：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';
import { NbAuthSocialLink } from '@nebular/auth';
import { NbAuthService } from '@nebular/auth';
import { DataService } from '../@core/utils/data.service';

@Component({
  selector: 'ngx-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent implements OnInit {
  
  constructor(
    private dataService : DataService,
    private router : Router
    ){}


  ngOnInit(){
    
  }

  textAnalysis(name, text){
    this.dataService.sendText(text).subscribe((data: any[])=>{
        
            console.log(data)

            localStorage.setItem('user_name', name)

            localStorage.setItem('insights', JSON.stringify(data)); 

            console.log('localStorage json stringified object item set to: insights')

            console.log("<----------test: should output 'Imagination'---------->")

            console.log(data['personality'][0]['children'][3]['name'])  
        
    }).then(() => {
            this.router.navigate(['/pages']);
        })   
    
    }  
  }
}

和DataService 函数：

 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';



const httpOptions = {
};

declare var google: any;




@Injectable({
  providedIn: 'root',
})


export class DataService {

 

  constructor(private http: HttpClient) { }
 
  public sendText(data){
    return this.http.post("//localhost:8000/personalityFromText", data, {withCredentials: true});
  }

Answer 1

您不需要实现 then 块，只需将导航放在订阅成功块中即可。

     textAnalysis(name, text){
        this.dataService.sendText(text).subscribe((data: any[])=>{
    
        console.log(data)

        localStorage.setItem('user_name', name)

        localStorage.setItem('insights', JSON.stringify(data)); 

        console.log('localStorage json stringified object item set to: insights')

        console.log("<----------test: should output 'Imagination'---------->")

        console.log(data['personality'][0]['children'][3]['name'])  
        this.router.navigate(['/pages']);
    
});

Answer 2

HttpClient 是 Observable，而不是 Promise，因此您需要使用管道执行此操作，就像步骤链一样思考，如下所示：

this.dataService.sendText(text).pipe(
    tap(data => localStorage.setItem('user_name', name)),
    tap(data => localStorage.setItem('insights', JSON.stringify(data))),
).subscribe(
    (data) => this.router.navigate(['/pages']),
    (error) => console.error(error)
);

除了点击之外，还有其他几种可能的组合，请花点时间了解更多信息。