Question

我在尝试创建将 keyup 事件转换为可观察流时遇到问题。

我正在关注Ng-book第6版。我遇到了一个在您输入时搜索YouTube视频的示例。当搜索返回时，我们将显示视频缩略图结果列表，以及每个视频的说明和链接。

因此，我们使用observable.fromEvent：https://github.com/NiLinli/ng-book2-angular-6-r68-code-samples/blob/master/http/src/app/you-tube-search/search-box.component.ts

在RxJS 5中，它提供了一种使用Rx.Observable.fromEvent侦听元素上事件的方法。

ngOnInit(): void {
// convert the `keyup` event into an observable stream
Observable.fromEvent(this.el.nativeElement, 'keyup')

但是我收到了这个错误：

src / app / search-box / search-box.component.ts（42,13）中的错误：错误 TS2339：类型'typeof上不存在属性'fromEvent' 可观察到的”。

I RxJS 6 Observable和fromEvent的导入是这样的：

import { Observable, fromEvent } from 'rxjs';

这是我在Angular 6中的RxJs5版本的代码:(它不起作用）

Observable.fromEvent(this.el.nativeElement, 'keyup')
.map((e: any) => e.target.value) // extract the value of the input 
.filter((text: string) => text.length > 1) // filter out if empty 
.debounceTime(250) // only once every 250ms 
.do(() => this.loading.emit(true)) // enable loading
      // search, discarding old events if new input comes in
.map((query: string) => this.youtube.search(query)) 
.switch()

这是我尝试使用RxJs 6和angular 6 （根据最后一个答案更新）

我正在尝试使用管道语法：

    const obs = fromEvent(this.el.nativeElement, 'keyup')
        .pipe (
            .map((e:any) => e.target.value) // extract the value of the input

            // .filter((text:string) => text.length > 1) //filter out if empty

            .debounceTime(250) //only search after 250 ms

            .tap(() => this.loading.emit(true)) // Enable loading
            // search, call the search service

            .map((query:string) => this.youtube.search(query)) 
            // discard old events if new input comes in

            .switchAll()
            // act on the return of the search
            )

但我有这个错误：

属性'map'在类型Observable {＆lt;＆gt;}
上不存在

在命令行中，运行服务后：

搜索框/ search-box.component.ts（40,4）中的错误：错误TS1135：参数＆gt;表达预期。 search-box / search-box.component.ts（54,4）：错误TS1128：声明或＆gt;声明预期。

但是，它不起作用...... 那么，我应该如何编写我的管道sintax？

我的研究如何进行：

Ng-book中的文档已过时。
angular guide的文档不同。
我打开一个Issue on GitHub,但是他们把我送回了这里

Answer 1

这适用于您的情况：

const api_key ='09e33ec3a8beb8e071a993a59de37c17';

class WeatherApp extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      city: 'Dhaka',
      description: ''
    }
  }

  componentDidMount(){
    this.grabWeather(this.state.city);
  }

  grabWeather(city){
    fetch(`http://api.openweathermap.org/data/2.5/weather?APPID=${api_key}&q=${city}`)
    .then(response => response.json())
    .then(json => {
      this.setState({description: json.weather[0].description})
    });
    console.log("working");
  }

  render(){
    return(
      <div>
        <h1>Today's Weather</h1>
        <h2>City: { this.state.city }</h2>
        <h2>Description: {this.state.description}</h2>
      </div>
    );
  }
}

ReactDOM.render(<WeatherApp />,
document.getElementById("app"));

希望它有所帮助！

修改这是关于Stackblitz的工作演示：Demo Angular 6 + Rxjs 6

Answer 2

在RxJS 5中，你正在编写

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';

RxJS 6的导入已更改

import { Observable, of, Subject, Subscription } from 'rxjs';
import { map, filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';

有关详细信息，请查看RxJS migration guide。

类型'typeof Observable'Angular 6上不存在fromEvent属性

2 个答案: