Angular4-在线竞拍应用-管道

<p>我的生日是{{birthday}}</p>

birthday:Date=new Date();

显示结果为

我的生日是Sun Oct 01 2017 19:31:09 GMT+0800 (中国标准时间)

修改html

<p>我的生日是{{birthday|date}}</p>

显示结果为

我的生日是Oct 1,2017

还可以用多个管道，修改html

<p>我的生日是{{birthday|date|uppercase}}</p>

显示结果，小写的管道是lowercase

我的生日是OCT 1,2017

<p>我的生日是{{birthday|date:'yyyy-MM-dd HH:mm:ss'}}</p>

<p>圆周率是{{pi | number:'2.2-2'}}</p>

pi:number=3.1415926;

显示结果为圆周率是03.14

显示了两位整数，两位小数，2-2，第一个2代表的意思是最少显示几位小数，第二个2的意思是最多显示几位小数。

自定义管道

新建一个管道multiple，ng g pipe pipe/multiple

修改multiple.pipe.ts

import { Pipe,PipeTransform } from '@angular/core';

@Pipe({
  name: 'multiple'
})
export class MultiplePipe implements PipeTransform {

  transform(value: number,args?: number): any {
    if(!args){
      args=1;
    }
    return value*args;
  }

}

<p>试试自己写的管道{{size | multiple}}</p>

size:number=8;

显示结果为，试试自己写的管道8

<p>试试自己写的管道{{size | multiple:'9'}}</p>

显示结果为，试试自己写的管道72

修改auction

修改product.component.html，在最上边添加

<div class="row">
  <div class="col-sm-12">
    <div class="form-group">
      <input class="form-control" placeholder="请输入商品名称" [formControl]="titleFilter">
    </div>
  </div>
</div>

在app.module.ts中引入ReactiveFormsModule

import{FormsModule,ReactiveFormsModule} from '@angular/forms'

 imports: [
    BrowserModule,RouterModule.forRoot(routeConfig),FormsModule,ReactiveFormsModule
  ],

修改product.component.ts

import {Component,OnInit} from '@angular/core';
import {Product,ProductService} from "../shared/product.service";
import{FormControl} from '@angular/forms'
import 'rxjs/Rx'

@Component({
  selector: 'app-product',templateUrl: './product.component.html',styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  private products:Product[];
  private keyword:string;
  private titleFilter:FormControl=new FormControl();

  private imageUrl= 'http://placehold.it/320x150';

  constructor(private productService:ProductService) {
    this.titleFilter.valueChanges
      .debounceTime(500)
      .subscribe(
        value=>this.keyword=value
      )

  }

  ngOnInit() {
    this.products=this.productService.getProducts();
  }

}

用命令行工具生产管道filter

ng g pipe pipe/filter

修改filter.pipe.ts

import { Pipe,PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  //filterField是告诉是要根据商品的标题进行过滤还是价格。。。。
  //keyword就是搜索框中输入的东西
  transform(list:any[],filterField:string,keyword:string): any {

    //如果没有传进来
    if(!filterField||!keyword){
      return list;
    }


    return list.filter(item=>{
      let fieldValue=item[filterField];
      return fieldValue.indexOf(keyword)>=0;
    });
  }

}

修改product.component.html

<div *ngFor="let product of products | filter:'title':keyword" class="col-md-4 col-sm-4 col-lg-4">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!