- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有一个输入字段,当用户键入搜索字符串时,我想等待用户停止键入至少 300 毫秒(去抖动),然后再执行 _heroService http 请求。只有更改的搜索值才能通过服务 (distinctUntilChanged)。 switchMap 返回一个结合了这些 _heroService observable 的新 observable,按照它们原来的请求顺序重新排列它们,并只向订阅者提供最新的搜索结果。
我正在使用 Angular 2.0.0-beta.0 和 TypeScript 1.7.5。
我如何让这个东西正常工作?
编译错误:
Error:(33, 20) TS2345: Argument of type '(value: string) => Subscription<Hero[]>' is not assignable to parameter of type '(x: {}, ix: number) => Observable<any>'.Type 'Subscription<Hero[]>' is not assignable to type 'Observable<any>'. Property 'source' is missing in type 'Subscription<Hero[]>'.
Error:(36, 31) TS2322: Type 'Hero[]' is not assignable to type 'Observable<Hero[]>'. Property 'source' is missing in type 'Hero[]'.
运行时错误(在搜索输入字段中键入第一个键后):
EXCEPTION: TypeError: unknown type returned
STACKTRACE:
TypeError: unknown type returned
at Object.subscribeToResult (http://localhost:3000/rxjs/bundles/Rx.js:7082:25)
at SwitchMapSubscriber._next (http://localhost:3000/rxjs/bundles/Rx.js:5523:63)
at SwitchMapSubscriber.Subscriber.next (http://localhost:3000/rxjs/bundles/Rx.js:9500:14)
...
-----async gap----- Error at _getStacktraceWithUncaughtError
EXCEPTION: Invalid argument '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' for pipe 'AsyncPipe' in [heroes | async in Test@4:16]
测试1.ts
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
import 'rxjs/Rx';
import {Hero} from './hero';
import {HeroService} from './hero.service';
@Component({
selector: 'my-app',
template: `
<h3>Test</h3>
Search <input #inputUser (keyup)="search(inputUser.value)"/><br>
<ul>
<li *ngFor="#hero of heroes | async">{{hero.name}}</li>
</ul>
`,
providers: [HeroService, HTTP_PROVIDERS]
})
export class Test {
public errorMessage: string;
private _searchTermStream = new Subject<string>();
private heroes: Observable<Hero[]> = this._searchTermStream
.debounceTime(300)
.distinctUntilChanged()
.switchMap((value: string) =>
this._heroService.searchHeroes(value)
.subscribe(
heroes => this.heroes = heroes,
error => this.errorMessage = <any>error)
)
constructor (private _heroService: HeroService) {}
search(value: string) {
this._searchTermStream.next(value);
}
}
bootstrap(Test);
英雄.ts
export interface Hero {
_id: number,
name: string
}
英雄.service.ts
import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Headers, RequestOptions} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
import {Hero} from './hero';
@Injectable()
export class HeroService {
private _heroesUrl = 'api/heroes';
constructor (private http: Http) {}
getHeroes () {
return this.http.get(this._heroesUrl)
.map(res => <Hero[]> res.json())
.do(data => console.log(data))
.catch(this.handleError);
}
searchHeroes (value) {
return this.http.get(this._heroesUrl + '/search/' + value )
.map(res => <Hero[]> res.json())
.do(data => console.log(data))
.catch(this.handleError);
}
addHero (name: string) : Observable<Hero> {
let body = JSON.stringify({name});
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(this._heroesUrl, body, options)
.map(res => <Hero> res.json())
.do(data => console.log(data))
.catch(this.handleError)
}
private handleError (error: Response) {
// in a real world app, we may send the server to some remote logging infrastructure
// instead of just logging it to the console
console.log(error);
return Observable.throw('Internal server error');
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<script src="angular2/bundles/angular2-polyfills.js"></script>
<script src="typescript/lib/typescript.js"></script>
<script src="systemjs/dist/system.js"></script>
<script src="angular2/bundles/router.dev.js"></script>
<script src="rxjs/bundles/Rx.js"></script>
<script src="angular2/bundles/angular2.js"></script>
<script src="angular2/bundles/http.dev.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'components': {defaultExtension: 'ts'}}
});
System.import('components/test1')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
这是另一个版本“test2.ts”,它在每次 (keyup) 事件后都可以正常执行 http 请求:
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
import {Hero} from './hero';
import {HeroService} from './hero.service';
@Component({
selector: 'my-app',
template: `
<h3>Test</h3>
Search <input #inputUser (keyup)="search(inputUser.value)"/><br>
<ul>
<li *ngFor="#hero of heroes">{{hero.name}}</li>
</ul>
`,
providers: [HeroService, HTTP_PROVIDERS]
})
export class Test {
public heroes:Hero[] = [];
public errorMessage: string;
constructor (private _heroService: HeroService) {}
search(value: string) {
if (value) {
this._heroService.searchHeroes(value)
.subscribe(
heroes => this.heroes = heroes,
error => this.errorMessage = <any>error);
}
else {
this.heroes = [];
}
}
}
bootstrap(Test);
最佳答案
.subscribe(...)
返回一个 Subscription
,而不是一个 Observable
。删除 subscribe(...)
或将其替换为 .map(...)
并使用 .subscribe(...)
当您访问它以获取值时。
关于http - Angular2 @TypeScript 可观察到的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35581606/
我想知道是否有一种方法可以重复记录而不进行排序?有时候,我想保持原始顺序,只想删除重复的记录。 是否可以? 顺便说一句,以下是我所知道的有关重复记录的信息,这些记录最终会进行排序。 1。 proc s
我想更新我的 Activity 中依赖于另一个列表的数据的列表。这两个数据列表都是从我的 View 模型的 Activity 中观察到的。从第一个列表获取数据后,我需要在此列表上运行 for 循环以获
我无法理解这个问题。我怎样才能等待 i==2 完成然后再继续其他 i 的操作? class Observable { constructor() { this.observer
我正在观察这样的 Ember Data RecordArray: myArray: function() { return MyRecord.find(); }.property(), isDir
我想在动画开始时观察 strokeEnd 键路径。但是它不起作用,我哪里出错了? - (void)addAnimation { // do animation CABasicAnima
是否可以在 Algorand 中观看某个交易,就像在以太坊中观看某个事件一样? 最佳答案 官方 algod 和 indexer API 目前不支持在 Algorand 上观看交易/事件。 您可以通过使
我有一个可以拖放到其他 View 之上的 View (可以说是类别)。为了检测我在哪个类别 View 之上,我将它们的帧存储在一个帧数组中,这发生在它们不可见叠加层的 onAppear 中。 (这基于
是否可以将观察者添加到可见性更改(即调用 show() 和 hide())时触发的 DOM 元素?谢谢! 最佳答案 如果您想观察任何对 .show() 或 .hide() 的调用,并且可以访问 jQu
我对保存在 NSUserdefaults 中的特定键的值变化感兴趣。然而,我所拥有的并不适合我。 observeValueForKeyPath 不会被触发。 更新:我想我已经发现了这个问题。如果我使用
我正在寻找在 UITableView 顶部实现捏入/捏出,我已经研究了几种方法,包括这个: Similar question 但是,虽然我可以创建一个 UIViewTouch 对象并将其覆盖到我的 U
我有一个在界面中公开的可变数组。我还公开了数组访问器来修改数组。如果数组内发生任何修改,我将不得不使用 KVO 重置并重新计算一些数据。为了支持 KVO,我使用 array accessors如下图:
当 NSPopupButton 发生变化时如何获得方法调用?谢谢! 最佳答案 您只需添加一个操作方法,就像使用 NSButton 或任何其他控件一样。 关于iphone - 观察 NSPopupBut
我正在尝试让键值观察适用于 NSMutableArray。下面是被观察类 MyObservee 的 .h 文件: @interface MyObservee : NSObject { @pri
我很难理解让 Node.js 进程(异步)运行但仍然触发“退出”状态,以便在 CPU 处理完成后我可以做更多事情。 例如,我有一个 Google 地方信息抓取工具,可以在所有可用的 CPU 上高效地分
我正在尝试编写行为类似于kubectl get pods --watch . 这样,每次 pod 的状态发生变化时,我都会被触发。 我创建了一个 go项目(在集群中运行)并添加以下代码: podsWa
我有这个代码: 当时我需要触发Javascript方法或具有给定 id 的 div 隐藏或显示,这将在屏幕调整大小期间发生(因此 u k-hidden-small ),这可以
我想使用 Couchbase,但我想在一些类似于 RethinkDB 的方式实现更改跟踪。 似乎有很多方法可以将更改从 Couchbase 服务器推送给我。 DCP 点击 XDCR 哪一个是正确的选择
虽然 MutationObserver 允许监视 HTMLElement 属性的显式大小更改,但它似乎没有一种方法/配置允许我监视其大小的隐式更改,这些更改是由浏览器。 这是一个例子: const o
我有一个 auto-carousel 指令,它循环访问链接元素的子元素。 但是,子级尚未加载到 DOM 中,因为它们的 ng-if 表达式尚未解析。 如何确保父指令知道其 DOM 树已发生更改?
有没有办法观察 AngularJS 指令中函数表达式的值变化?我有以下 HTML 和 JavaScript,模板中 {{editable()}} 的插值显示该值计算为 true,而检查 Chrome
我是一名优秀的程序员,十分优秀!