Angular 订阅变量的打字稿没有给出正确的结果

Question

动机：我在保存期间对书名进行验证 - 如果数据库中已经有一本同名的书，则应抛出验证错误消息。我的服务中有一个方法，如果用户输入的书名存在任何书籍，returns 书籍对象。

调用此服务方法后，我订阅了它，将结果赋给一个bool 变量，并在if 语句中检查bool 变量。因为使用 subscribe/observable，if 语句首先执行，然后订阅者被调用并且没有返回正确的值并且验证没有触发。

我哪里错了？提前致谢。

下面是我的代码：

export class AddBooksComponent implements OnInit{
  
  bookName = "";
  isError = false;
  errorMessage="";
  isPresent:boolean = false;
  
  constructor(public bsModalRef: BsModalRef,private booksService: BooksService) { }

  ngOnInit(): void { }

  saveBooks() {   
    if(this.checkBookExistenance()) {
      this.isError = true
      this.errorMessage="The provided book name is already exists."
    } else {     
      this.bsModalRef.hide()
    }
  }

  checkPreferenceExistenance():boolean {
 
    this.booksService.getBookByName(bookNameName:trim(this.bookName))
      .pipe(first())
      .subscribe((data) => {
      
        // if the response has data then the book is present
        if(data.length) {
          isPresent= true;
        }
        else{
          isPresent= false;
        }           
    }); 
    return isPresent;
  }
}

Answer 1

this.booksService.getBookByName() 是异步的，它需要一些时间来执行，同时代码继续执行。 checkBookExistenance应该return一个可观察的：

checkPreferenceExistenance(): Observable<boolean> {
    return this.booksService.getBookByName(bookNameName: trim(this.bookName)).pipe(
      first(),
      map(data => {
        if (data.length){
          return true;
        }else{
          return false;
        }
        })
// or shortform without if/else: map(data => data.length)
    );
  }

然后：

    this.checkPreferenceExistenance().subscribe(
      exist => {
        if (exist) {
          this.isError = true
          this.errorMessage = "The provided book name is already exists."
        } else {
          this.bsModalRef.hide()
        }
      }
    );

Angular 订阅变量的打字稿没有给出正确的结果

Angular typescript subscribing to a variable does not give correct results

javascript

angular

typescript

observable

subscribe