Question

我有一个带有输入字段和一些按钮的Mat对话框，每当我按下其中一个按钮时，都应该在输入字段中插入值，从数据库中检索一些信息，然后通过以下方式将其发送到组件服务。

问题在于，每当我单击按钮时，我都会执行多个请求，而不仅仅是一个。

第一个请求返回未定义，因此，我的组件没有填充我想要的值。第二个请求检索我想要的值，但是因为我已经在组件中，所以该信息不会通过我的服务传播。

这是我的代码：

我认为该服务运行良好，因为我已成功将其与其他两个组件一起使用。

my.service.ts

create view sample_description as 
select person_description, name, employee_id
from employee_table 
group by TO_CHAR(person_description), name, review_id;

在Mat对话框中，单击执行createReturn（value）函数的按钮。我已经通过调试检查了该值是否正确，因此它也可以正确执行else语句。

getOrderByID和getOrderByNumber函数（取决于值）被执行了几次，但是我看不出这样做的原因。

my-dialog.component.ts

private ordersSource = new BehaviorSubject({});
currentOrders = this.ordersSource.asObservable();

private returnsSource = new BehaviorSubject({});
currentReturns = this.returnsSource.asObservable();

constructor() { }

setOrders(el){
  this.ordersSource.next(el);
}

setReturns(el){
  this.returnsSource.next(el);
}

这是router.navigate（['my-component']）重定向到的组件。当我在另一个组件中使用服务时，该组件可以正常工作，因此我认为问题不在这里。

my-component.component.ts

private orders: {};
private returns: Return[] = [];

constructor(public rest: RestService, private route: ActivatedRoute, private router: Router,
    private dialogRef: MatDialogRef<MyDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any[],
    private myService: MyService, public dialog: MatDialog) { }

private createReturn(value) {
  if (value === undefined || value === "") {
    this.inputForm.setErrors({ 'invalid': true });
  } else {
    this.getOrder(value);
    if (this.orders !== undefined) {
      this.router.navigate(['my-component']);
      this.closeDialog();
    }
  }
}

// Also working as expected, no problem detected here
private getOrder(value) {
  if (value.length > 0 && !isNaN(value)) {
    this.getOrderByID(value);
  } else if (value.length > 0 && isNaN(value)) {
    this.getOrderByNumber(value);
  }
  this.myService.setOrders(this.orders);
  this.myService.setReturns(this.returns);
}

private getOrderByID(value) {
  this.rest.getOrder(value).subscribe((orderIdData: {}) => {
    if (Object.entries(orderIdData).length !== 0) {
      this.orders = orderIdData;
      this.rest.getReturnByOrderId(value).subscribe((returnOrdIdData: Return[]) => {
        if (Object.entries(returnOrdIdData).length !== 0) {
          this.returns = returnOrdIdData;
        } else {
          this.returns = [];
        }
      }, error => {
        if (error.status === 404) {
          this.returns = [];
        }
      });
    } else {
      this.inputForm.setErrors({ 'invalid': true });
    }
  }, error => {
    this.inputForm.setErrors({ 'invalid': true });
  });
}

private getOrderByNumber(value) {
  this.rest.getOrderByNumber(value).subscribe((orderNrData: {}) => {
    if (Object.entries(orderNrData).length !== 0) {
      this.orders = orderNrData;
      this.rest.getReturnByOrderNumber(value).subscribe((returnOrdNrData: Return[]) => {
        if (Object.entries(returnOrdNrData).length !== 0) {
          this.returns = returnOrdNrData;
        } else {
          this.returns = [];
        }
      }, error => {
        if (error.status === 404) {
          this.returns = [];
        }
      });
    } else {
      this.inputForm.setErrors({ 'invalid': true });
    }
  }, error => {
    this.inputForm.setErrors({ 'invalid': true });
  });
}

我尝试使用Chrome的DevTools进行调试，发现当我只希望执行一次该请求时，该请求被执行了三到六次。

有人知道怎么了吗？

Answer 1

对于任何想知道的人，这是我找到的解决方案... 我终于理解并弄清楚我的代码出了什么问题。

基本上，我试图在数据库响应所需数据之前将数据发送到服务并导航到组件。此外，由于这个https://stackoverflow.com/a/53371896/11033212，有多个http请求。

因此，我进行了以下更改：

my-dialog.component.ts

private getData(value) {
  if (value === undefined || value === "") {
    this.inputForm.setErrors({ 'invalid': true });
  } else {
    this.getOrder(value);
  }
}

private getOrder(value) {
  if (value.length > 0 && !isNaN(value)) {
    this.getOrderByID(value);
  } else if (value.length > 0 && isNaN(value)) {
    this.getOrderByNumber(value);
  }
}

private getOrderByID(value) {
  this.rest.getOrder(value).subscribe((orderIdData: {}) => {
    if (Object.entries(orderIdData).length !== 0) {
      this.orders = orderIdData;
      this.rest.getReturnByOrderId(value).subscribe((returnOrdIdData: Return[]) => {
        if (Object.entries(returnOrdIdData).length !== 0) {
          this.returns = returnOrdIdData;
        } else {
          this.returns = [];
        }
        this.createReturn(orderIdData);
      }, error => {
        if (error.status === 404) {
          this.returns = [];
        }
        this.createReturn(orderIdData);
      });
    } else {
      this.inputForm.setErrors({ 'invalid': true });
    }
  }, error => {
    this.inputForm.setErrors({ 'invalid': true });
  });
}

private getOrderByNumber(value) {
  this.rest.getOrderByNumber(value).subscribe((orderNrData: {}) => {
    if (Object.entries(orderNrData).length !== 0) {
      this.orders = orderNrData;
      this.rest.getReturnByOrderNumber(value).subscribe((returnOrdNrData: Return[]) => {
        if (Object.entries(returnOrdNrData).length !== 0) {
          this.returns = returnOrdNrData;
        } else {
          this.returns = [];
        }
        this.createReturn(orderNrData);
      }, error => {
        if (error.status === 404) {
          this.returns = [];
        }
        this.createReturn(orderNrData);
      });
    } else {
      this.inputForm.setErrors({ 'invalid': true });
    }
  }, error => {
    this.inputForm.setErrors({ 'invalid': true });
  });
}

// This only happens after my database's response occurs
private createReturn(el) {
  this.setData(el);
  this.closeDialog();
  this.router.navigate(['my-component']);
}

现在，在发生点击事件时，我的输入字段将调用getData（）。

以前，我是在调用函数以关闭对话框并导航到getOrderByID和getOrderByNumber函数请求之外的组件。这导致前一个功能在请求得到响应之前执行。

有了这些更改，我的代码现在等待数据库的响应，然后继续执行。

为什么我的HTTP get请求被多次调用？

my.service.ts

my-dialog.component.ts

my-component.component.ts

1 个答案:

my-dialog.component.ts