标签: subscribe

我觉得这个场景应该在Angular 2文档中,但我无法在任何地方找到它.

这是场景

1. 提交在服务器上无效的表单(创建对象)
2. 服务器返回400错误的请求,我在表单上显示错误
3. 在订阅返回后,我想检查一个错误变量或其他东西(即如果没有错误>然后路由到新创建的详细信息页面)

我想它的工作方式如下:

this.projectService.create(project)
    .subscribe(
        result => console.log(result),
        error => {
            this.errors = error
        }
    ); 
}

if (!this.errors) {
    //route to new page
}

我对Angular 2很新,所以这可能源于我对Observable的工作方式缺乏了解.我在表单上显示数据没有问题,但无法弄清楚如何在ts组件中看到它.我真的只想检查http create的成功/失败.

当我运行lint时，它说：

subscribe is deprecated: Use an observer instead of an error callback

代码（来自带有angular-cli的angular 7应用）：

subscribe is deprecated: Use an observer instead of an error callback

不确切地知道我应该使用什么以及如何使用...

谢谢！

我有3个关于事件的问题:

1. 我应该总是取消订阅订阅的活动吗？
2. 如果我不这样做会怎么样？
3. 在下面的示例中,您将如何取消订阅订阅的活动？

我有这样的代码:

Ctor:目的:用于数据库属性更新

this.PropertyChanged += (o, e) =>
{
    switch (e.PropertyName)
    {
        case "FirstName": break;
        case "LastName": break;
    }
};

这个:目的:用于GUI绑定将模型包装到视图模型中

ObservableCollection<Period> periods = _lpRepo.GetDailyLessonPlanner(data.DailyDate);
PeriodListViewModel = new ObservableCollection<PeriodViewModel>();

foreach (Period period in periods)
{
    PeriodViewModel periodViewModel = new PeriodViewModel(period,_lpRepo);
    foreach (DocumentListViewModel documentListViewModel in periodViewModel.DocumentViewModelList)
    {
        documentListViewModel.DeleteDocumentDelegate += new Action<List<Document>>(OnDeleteDocument);
        documentListViewModel.AddDocumentDelegate += new Action(OnAddDocument);
        documentListViewModel.OpenDocumentDelegate += new Action<int, string>(OnOpenDocument);
    }
    PeriodListViewModel.Add(periodViewModel);
}

我需要在从http post请求中获取数据后调用方法

service:request.service.TS

get_categories(number){
 this.http.post( url, body, {headers: headers, withCredentials:true})
    .subscribe( 
      response => {
        this.total = response.json();

      }, error => {
    }
  ); 

}

组件:categories.TS

search_categories() {

this.get_categories(1);
//I need to call a Method here after get the data from response.json() !! e.g.: send_catagories();
}

只有在我改为:

service:request.service.TS

get_categories(number){
 this.http.post( url, body, {headers: headers, withCredentials:true})
    .subscribe( 
      response => {
        this.total = response.json();
        this.send_catagories(); //here works fine

      }, error => {
    }
  ); 

}

但我需要调用的方法send_catagories()调用后构件的内部this.get_categories(1);这样的

组件:categories.TS

search_categories() { …

有什么像q.all来解决angular2中的所有http api请求？

在angular1中,我可以这样做:

var promises = [api.getA(),api.getB()];
$q.all(promises).then(function(response){
    // response[0]  --> A
    // response[1]  --> B
})

在angular2中,http模块返回Observable,

api.getA().subscribe(A => {A})
api.getB().subscribe(B => {B})

但我想一起解决A和B,然后做点什么.

什么是简化以下代码示例的方式？我找不到合适的操作员..任何人都可以举一个简短的例子吗？

this.returnsObservable1(...)
  .subscribe(

    success => {

      this.returnsObservable2(...)
        .subscribe(

          success => {

            this.returnsObservable3(...)
              .subscribe(

                success => {
                   ...
                },

我是rxjs的新手,只是想知道通过管道流并点击它来设置类属性是可以的,或者它应该在订阅中进行.对我来说无论哪种方式都有效,只是想知道是否可以按照我认为合适的方式做到这一点,或者有一些我不知道的事情.

打字稿代码演示两种方式:

export class ViewComponent implements OnInit {

  applicant = {};

  constructor(public route: ActivatedRoute, private store: Store<any>) {}

  ngOnInit() {
    this.route.paramMap.pipe(
      switchMap(params => this.store.select(state => state.applicants.entities[params.get('id')])),
      tap(applicant => this.applicant = applicant)
    ).subscribe();
  }
}

VS

export class ViewComponent implements OnInit {

  applicant = {};

  constructor(public route: ActivatedRoute, private store: Store<any>) {}

  ngOnInit() {
    this.route.paramMap.pipe(
      switchMap(params => this.store.select(state => state.applicants.entities[params.get('id')]))
    ).subscribe(applicant => this.applicant = applicant);
  }
}

当变量在订阅中发生变化时,为什么视图没有更新？

我有这个代码:

example.component.ts

testVariable: string;

ngOnInit() {
    this.testVariable = 'foo';

    this.someService.someObservable.subscribe(
        () => console.log('success'),
        (error) => console.log('error', error),
        () => {
            this.testVariable += '-bar';

            console.log('completed', this.testVariable);
            // prints: foo-Hello-bar
        }
    );

    this.testVariable += '-Hello';
}

example.component.html

{{testVariable}}

但视图显示:foo-Hello.

为什么不显示:foo-Hello-bar？

如果我ChangeDetectorRef.detectChanges()在订阅中调用它将显示正确的值,但为什么我必须这样做？

我不应该从每个订阅中调用此方法,或者根本不应该(angular应该处理这个).有正确的方法吗？

我是否遗漏了Angular/rxjs 5到6的更新内容？

现在我有Angular版本6.0.2和rxjs 6.0.0.相同的代码在Angular 5.2和rxjs 5.5.10中正常工作,无需调用detectChanges.

问题
我订阅了两次httpClient.get observable.但是,这意味着我的调用会被执行两次.为什么是这样？

证明
对于我做的每个订阅(),我在登录页面中得到另一行.

代码(来自登录页面按钮的onSubmit())

var httpHeaders = new HttpHeaders()
  .append("Authorization", 'Basic ' + btoa(this.username + ':' + this.password));

var observable = this.httpClient.get('api/version/secured', { headers: httpHeaders});
observable.subscribe(
  () => {
    console.log('First request completed');
  },
  (error: HttpErrorResponse) => {
    console.log('First request error');
  }
);
observable.subscribe(
  () => {
    console.log('Second request completed');
  },
  (error: HttpErrorResponse) => {
    console.log('Second request error');
  }
);

安慰

zone.js:2935 GET http://localhost:4200/api/version/secured 401 (Unauthorized)
login.component.ts:54 First request error
zone.js:2935 GET http://localhost:4200/api/version/secured 401 (Unauthorized)
login.component.ts:62 First request error …

什么是订阅用于Mailchimp列表的完整jQuery解决方案？

问题是大多数解决方案要么使用库,要么需要服务器端代码.我想要一个快速优雅的解决方案,它让我完全控制UI,因此表单的UX和它的功能.