Как я могу получить поведение компиляции и методы ошибок с сервера?

Question

Мой сервис выглядит следующим образом:

@Injectable()
export class SettingService {
    private settings = new BehaviorSubject<any[]>([]);

    constructor(private http: HttpClient) {
        this.loadSettings();
    }

    private loadSettings() {
        this.http.get<any[]>('/api/settings')
            .subscribe({
                 next: (settings) => this.settings.next(settings),
                 complete: () => this.settings.next,
                 error: (s) => this.settings.next(s)
             });
    }

    getSettings() {
        return this.settings.asObservable();
    }
}

И я использую этот сервис в своем компоненте:

@Component({
  selector: 'app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
   settings: any[];
   constructor(settingsService: SettingService){
     settingsService.getSettings().subscribe({
      next: components => {
        this.settings = settings;
      },
      error: (s) => {
        console.log("error.")
      },
      complete: () => {
        console.log("complated.")
      }
    });

   }
}

Но методы с ошибками или компиляцией не работают в компоненте. Только следующий метод работы.

Answer 1

хотя вы можете просто сделать это

   this.http.get<any[]>('/api/settings')
        .subscribe({
             next: (settings) => this.settings.next(settings),
             complete: () => this.settings.complete(),
             error: (s) => this.settings.error(s)
         });

, но на самом деле вы должны просто вызвать loadSettings напрямую и присвоить ему свойство

settingsService.loadSettings().subscribe(res=>this.settings=res)

Answer 2

Я думаю, что ваш код должен быть таким:

@Injectable()
export class SettingService {
    private settings = new BehaviorSubject<any[]>([]);

    constructor(private http: HttpClient) {
        this.loadSettings();
    }

    private loadSettings() {
        this.http.get<any[]>('/api/settings')
            .subscribe(
              (settings) => this.settings.next(settings),
              (error) => console.error(error),
              () => console.log("I'm complete")
            );
            //.subscribe({
            //     next: (settings) => this.settings.next(settings),
            //     complete: () => this.settings.next,
            //     error: (s) => this.settings.next(s)
            // });
    }

    getSettings() {
        return this.settings.asObservable();
    }
}

и в компоненте

@Component({
  selector: 'app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
   settings: any[];

   constructor(settingsService: SettingService){ }

   ngOnInit() { 
     this.settingsService.getSettings().subscribe(
       (settings) => this.settings = settings
     );
   }

}

Кстати: вы уверены, что получаете Array ([]), а необъект ({}) с сервера? если вы получаете объект, вы должны изменить:

private settings = new BehaviorSubject<any[]>([]);
private settings = new BehaviorSubject<any>({});

this.http.get<any[]>('/api/settings')
this.http.get<any>('/api/settings')

settings: any[];
settings: any;