美文网首页Angular 4.X+
响应式编程结合数据绑定,制作动态搜索

响应式编程结合数据绑定,制作动态搜索

作者: IT飞牛 | 来源:发表于2018-04-24 22:00 被阅读0次

这是一个实际开发过程中,可能经常会遇到的场景,有以下两个要点。

要点:

1、前台input控件绑定到后台FormControl类型变量,进入观察者模式
2、使用管道动态筛选搜索结果

步骤一:组件所属模块中,申明import:ReactiveFormControl,declarations:FilterPipe
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';

import ...
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {FilterPipe} from '../../pipe/filter.pipe';

@NgModule({
  imports: [
    ...
    ReactiveFormsModule
  ],
  declarations: [
    ...
    FilterPipe
  ],
  providers: [
    ...
  ]
})
export class TaskModule {
}

步骤二:写好过滤器管道代码
//这个管道有单个参数:list(被筛选对象列表)、field(筛选的字段)、keyword(筛选关键字)
import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(list: Array<any>, field: string, keyword: string): any {
    if (!field || !keyword) {
      return list;
    }
    return list.filter(item => {
      return item[field].indexOf(keyword) >= 0;
    });
  }

}

步骤四:前端绑定input控件,写好管道
<!--将searchInput注册到formControl容器中,后台有对应的变量对接-->
<input type="text" name="table_search" class="form-control pull-right" placeholder="搜索"
               [formControl]="searchInput">

<table class="table table-bordered">
      <tbody>
      <tr>
        <th class="text-center" style="width: 10px">#</th>
        <th class="text-center">标题</th>
        <th class="text-center" style="width: 100px">负责人</th>
        <th class="text-center" style="width: 200px">学校</th>
        <th class="text-center" style="width: 100px">紧急程度</th>
        <th class="text-center" style="width: 100px">操作</th>
      </tr>
      <tr *ngFor="let item of tasks|filter:'title':keyword;let i=index">
        <td>{{item.id}}</td>
        <td><a href="javascript:;" (click)="OpenUrl(item.id)">{{item.title}}</a></td>
        <td class="text-center">{{item.fuzeren}}</td>
        <td>{{item.schoolname}}</td>
        <td><span class="badge bg-green">重要紧急</span></td>
        <td class="text-center">
          <a href="javascript:;">编辑</a>
          <a href="javascript:;">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
步骤五:后台ts代码
  import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {TaskService} from '../../../service/task.service';
import {FormControl} from '@angular/forms';
import 'rxjs/Rx';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
  private tasks = [];
  private keyword:string;
  private searchInput: FormControl = new FormControl();

  constructor(private router: Router, private taskService: TaskService) {
    this.tasks = this.taskService.GetTasks();
    //valueChanges是观察者对象类型
    this.searchInput.valueChanges
      .debounceTime(500)
      .subscribe(
        e => {
          this.keyword = e;
        }
      );
  }

  ngOnInit() {
  }

  OpenUrl(id) {
    this.router.navigate(['/main/task/detail', id]);
  }

}

最终效果Gif:


GIF.gif

相关文章

  • 响应式编程结合数据绑定,制作动态搜索

    这是一个实际开发过程中,可能经常会遇到的场景,有以下两个要点。 要点: 1、前台input控件绑定到后台FormC...

  • 响应式编程

    响应式编程 响应式编程 也是一种编程范式,于1997年提出,可以简化异步编程,提供更优雅的数据绑定一般与函数式融合...

  • vue的优势

    vue是单页面应用,页面局部刷新 ,响应的数据绑定/响应式编程,组件化,轻量级框架,简单易学,双向数据绑定,视图数...

  • 函数响应式编程思想 & RxSwift 核心逻辑

    函数响应式编程 函数响应式编程是种编程范式。它是通过构建函数操作数据序列,然后对这些序列做出响应的编程方式。它结合...

  • 函数响应式编程思想 & RxSwift 核心逻辑(一)

    函数响应式编程思想 函数响应式编程思想即是将函数式编程和响应式编程相结合。 函数式编程 顾名思义,就是像函数一样的...

  • RxJava

    响应式编程概述 什么是响应式编程? 是一种基于异步数据流概述的编程模式 响应式编程--关键概念 事件 响应式编程-...

  • RAC 的初级使用

    RAC的定义: ReactiveCocoa 可以说是结合了函数式编程和响应式编程的框架,也可称其为函数响应式编程(...

  • ReactiveCocoa编程思想

    ReactiveCocoa结合了几种编程风格: 函数编程(Functional Programing) 响应式编程...

  • iOS -RAC使用

    一、简介 ReactiveCocoa 可以说是结合了函数式编程和响应式编程的框架,也可称其为函数响应式编程(FRP...

  • setup

    1.模板绑定 直接返回模板绑定(非响应式) 响应式 2.参数 2.1 props 是由父组件传递下来的响应式数据和...

网友评论

    本文标题:响应式编程结合数据绑定,制作动态搜索

    本文链接:https://www.haomeiwen.com/subject/mteslftx.html