响应式编程

最新推荐文章于 2024-07-11 10:00:29 发布

Phoenix_99

最新推荐文章于 2024-07-11 10:00:29 发布

阅读量118

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/Phoenix_99/article/details/108982446

版权

angular 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

1.引入相应式编程控件

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
],

2.HTML

<h3>模板本地变量化 #inputbox</h3>
<input #inputbox (keyup)=onKeyup(inputbox.value)>
<h3>响应式编程</h3>
<br>
<input [formControl]="searchInput">

3.TS

import {from} from 'rxjs';
import {debounceTime, filter, map} from 'rxjs/operators';
import {FormControl} from '@angular/forms';

constructor() {
    // tslint:disable-next-line:triple-equals
    from([1, 2, 3, 4]).pipe(filter(e => e % 2 == 0),
      map(e => e * e)
    ).subscribe(
      e => console.log(e),
      err => console.error(err),
      () => console.log('结束了!'));

    this.searchInput.valueChanges.pipe(debounceTime(500))
      .subscribe(stockCode => this.getStockInfo(stockCode));