- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我遵循了教程 Angular Tour of Heroes 和其他一些教程,现在我正在尝试使用 Angular 2 构建应用程序。基本上,当我们正在监听 Subject 的变化时,我们可以等待几秒钟,这样请求就不会给网络带来负担。
这是我的代码:
import { Injectable } from '@angular/core';
import {Http} from "@angular/http";
import {Observable} from "rxjs/Observable";
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';
import {Employee} from "../employee";
@Injectable()
export class EmployeeSearchService {
private getPersonalURL:string = 'api/employee'; // I'm using mock, btw
constructor(private http:Http) { }
search(term:string): Observable<Employee[]> {
return this.http.get(`api/employee/?firstName=${term}`)
.map(response => response.json().data as Employee[])
.catch(this.handleError);
}
searchEmployees(term: Observable<string>): Observable<Employee[]> {
return term.debounceTime(200)
.distinctUntilChanged()
.switchMap(term => this.search(term)); // here is the error
}
private handleError(error: any): Promise<any> {
console.error('Error on EmployeeSearchService', error);
return Promise.reject(error.message || error);
}
}
这是调用组件:
import { Component, OnInit } from '@angular/core';
import {Subject} from "rxjs/Subject";
import { EmployeeService } from '../employee.service';
import { Employee } from '../employee'
import {EmployeeSharedService} from "../employee-shared.service";
import {EmployeeSearchService} from "../employee-search/employee-search.service";
@Component({
selector: 'employee-list',
providers: [ EmployeeService ],
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
employees: Employee[];
selectedEmployee: Employee;
sortAsc: boolean;
searchQuery = new Subject<string>();
constructor(private employeeService:EmployeeService, private employeeSearchService:EmployeeSearchService, private employeeSharedService:EmployeeSharedService) {
this.sortAsc = true;
}
ngOnInit() { // called from here
this.employeeSearchService.searchEmployees(this.searchQuery)
.subscribe(result => {
this.employees = result;
if(!result) {
this.getAllEmployees();
}
});
}
getAllEmployees(): void {
// calling get all in service
}
}
有错误说
TypeError: term.debounceTime(...).distinctUntilChanged(...).switchMap is not a function
我是否遗漏了什么,比如导入或其他东西?因为确切的代码和导入与 Angular Tour of Heroes 教程相同,而我的作品。但这个不是。
最佳答案
您还需要添加 switchMap
运算符:
import 'rxjs/add/operator/switchMap';
关于angular - switchMap 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43569444/
我不知道这之间是否有区别: Observable.pipe( switchMap((res) => { ... }),
我有以下代码 const mySource:Observable[]> (...) mySource.pipe( switchMap(arr=>forkJoin(arr)); ) 按预期工作,但
我正在尝试将 ViewModel 与某些 LiveData 一起使用,这些 LiveData 使用另一个 LiveData 的值。 为此,我尝试使用 Transformations.switchMap
我有以下组件: @Component({...}) export class AppComponent implements OnInit, OnDestroy { destroy$ = new
以下用例:用户可以加入 0...* 组。每个组都有一个 ID 并包含 0...* 个帖子。 我订阅了一个 Observable(以获取他加入的用户的组)并返回一个字符串数组(组 ID)。 const
我有 3 个端点返回即将发生的、当前的、过去的事件。我应该只显示 future 最远的那个。为了优化调用而不是一次调用所有端点。我编写了一个简单的 RxJs 流,我在其中调用第一个端点,如果它不返回数
我有一个表单,其中有一个按钮,可以使用表单的内容发送电子邮件。我想使用 switchmap,因为我想防止用户垃圾点击并创建大量 HTTP 请求,但我不知道该怎么做。 使用 switchmap 之前:
我正在尝试使用 switchMap 运算符切换可观察值: return this.db.list(`UserPlaces/${this.authData.auth.auth.currentUser.u
我尝试执行以下搜索: 我想根据第一个 id 搜索某些内容,这会返回一个 FirebaseListObservable。然后我尝试在 Observable 的 switchMap 函数中执行代码,因为搜
Observable .interval(2, TimeUnit.SECONDS) .switchMap(integer -> Observable
我遵循了教程 Angular Tour of Heroes 和其他一些教程,现在我正在尝试使用 Angular 2 构建应用程序。基本上,当我们正在监听 Subject 的变化时,我们可以等待几秒钟,
我有一个 Angular 应用程序,它向 Http 服务发出请求并在另一个 Http 服务上调用 switchMap。由于某种原因,switchMap 中的请求仅在第一次调用父调用时运行。否则父请求会
Angular 和 RxJS 的新手,试图稍微了解一下...我的应用程序对 UI 事件使用react,结果调用返回 Observable 的 HTTP 服务。我这样订阅: this.myXYZServ
我想解析一个 observable,但我不希望返回值替换管道中的先前值。有没有异步tap() ?我需要一个像 switchMap 这样的运算符(operator)但我想忽略返回。 of(1).pipe
我有一个 Observable,其中每个新值都应该引起一个 HTTP 请求。在客户端,我只关心最新的响应值;但是,我希望每个请求都能完成以进行监控/等。目的。 我目前拥有的是这样的: function
我有 HTTP 拦截器。在那个拦截器中,在我更改请求之前,我需要打开一个加载程序。 真正让我担心的是,我最终有很多 switchMap s。 为什么? 加载器是异步的 我还需要翻译从拦截器传递到加载器
这个问题已经有答案了: Angular 7 - nesting Observables (1 个回答) 已关闭 4 年前。 我正在尝试按照 Angular Routing 中有关如何获取路由参数的教程
我在使用 ngrx.store 和 states 时遇到了错误(?)。 在我调度新状态并且 reducer 返回新状态之后什么都没有发生。订阅不会收到任何错误消息。如果我删除 switchMap,代码
目前我有这段代码 this.save() .pipe(switchMap(() => this.unlock())) .subscribe(...); save 和unlock 实现是 pri
如果满足条件,我将尝试从 switchmap 返回一个值,但它返回的是拆分为单个字符的 console.log。因此,如果 Angular 色以 Buyer 身份返回,则它以 身份返回 console
我是一名优秀的程序员,十分优秀!