Question

我想在组件中获取方法的状态。

SendEmail.component.ts

sendEmail(form: NgForm) {

this.contractService.sendEmail(form.value.FullName, form.value.content,  form.value.Email);

// if successfull then show alert///

console.log(value);
form.resetForm(); }

我的服务。

sendEmail(FullName: string, content: string, Email: string) {
const Contact: Contacts = { _id: null, FullName: FullName, Content: content, Email: Email };
this.http
  .post<{ message: string; contact: string }>('http://localhost:3000/api/contacts', Contact)
  .pipe(
    map( (data: any) => {
      const result: any = [];
      data.map(item => {
        item = JSON.parse('Success');
      });
      return result;
    })
  )
  .subscribe(responseData => {
      this.contacts.push(Contact);
      this.contactsUpdated.next([...this.contacts]);
    });
}

当sendEmail方法内部成功或出错时，我想获取组件的状态。谢谢大家欢呼

Answer 1

好吧，您可以通过sendEmail方法发送它。因此，在此处而不是在subscribe块中编写逻辑，只需在map运算符中编写逻辑，然后从此处返回sucess：

export interface Message { 
  message: string; 
  contact: string; 
}

...    

sendEmail(FullName: string, content: string, Email: string) {

  const Contact: Contacts = {
    _id: null,
    FullName,
    Content: content,
    Email
  };

  return this.http.post<Message>('http://localhost:3000/api/contacts', Contact)
    .pipe(
      map((data: any) => {
        const result: any = [];
        data.map(item => {
          item = JSON.parse('Success');
          // this looks shady as you haven't returned anything from here
        });

        this.contacts.push(Contact); // Not sure what's Contact here
        this.contactsUpdated.next([...this.contacts]); // Not sure what's contacts here.

        return 'success';
      })
    );
}

然后，您可以将subscribe返回到sendEmail方法返回的任何位置，该方法实际上就是Observable<string>：

sendEmail(form: NgForm) {

  const { FullName, content, Email } = form.value;

  this.contractService.sendEmail(FullName, content, Email)
    .subscribe(res => {
      if(res === 'success') alert('Got the response');
      console.log(value);
      form.resetForm();
    })
}

注意：请确保仔细阅读注释。您在map运算符中的逻辑看起来是错误的。不太确定您在那做什么。

Answer 2

在您的HTTP POST呼叫的最后部分添加{ observe: 'response' }

sendEmail(FullName: string, content: string, Email: string) {

   this.http
     .post<ContactBody>('http://localhost:3000/api/contacts', Contact, { observe: 'response' })    // Add observe: 'response'
     .pipe(...)
     .subscribe(...);
}

“ {观察：<any>}” 值指定了我们当前对观察感兴趣的内容，因此在此还更改了HTTP请求的响应类型。在我们的案例中，我们观察到了响应 {observe：'response'}

已经创建了StackBlitz Demo供您参考-检查控制台的结果。

1。）具有纯数据响应的纯HTTP调用

this.http
  .post(url, data)
  .subscribe(data => console.log(data));

2。）使用{观察：“响应”}和完整的HTTP响应详细信息进行HTTP调用

 this.http
  .post(url, data, { observe: 'response' })
  .subscribe(data => console.log(data));

Answer 3

请尝试以下代码。

True表示成功，False表示失败。

sendEmail(FullName: string, content: string, Email: string):boolean {
let status:boolean =false;
const Contact: Contacts = { _id: null, FullName: FullName, Content: content, Email: Email };
this.http
  .post<{ message: string; contact: string }>('http://localhost:3000/api/contacts', Contact)
  .pipe(
    map( (data: any) => {
      const result: any = [];
      data.map(item => {
        item = JSON.parse('Success');
      });
      return result;
    })
  )
  .subscribe(responseData => {
      this.contacts.push(Contact);
      this.contactsUpdated.next([...this.contacts]);
      status=true;
    });
return status;
}

Answer 4

您正在Service中订阅它。代替执行此操作，您可以从Service返回Observable，然后在Component中订阅它以获取成功或错误状态。

您应该使用专门的服务，该服务将负责服务器调用并以Observable形式返回响应，以便您可以在组件中执行任何操作。

我认为值得花一些时间来了解Angular的官方文档。这是link。这将有助于您清楚地了解它的完成方式以及在Angular中进行http调用的好方法。

Angular 6如何获取从组件到服务的方法调用状态？

4 个答案: