[英]filtering the data according to data in angular4
我必须使用角度4过滤数据吗? 它是一个女性服饰网站。 例如,我必须根据尺寸,颜色和袖子长度过滤女式T恤。 因此有10+尺寸,6 +颜色,3 +袖长。 现在,如果我单击蓝色,则应显示所有蓝色的女式T恤,并且当我单击尺寸xl时,还应显示尺寸,然后应显示xl的所有女式T恤
app.component.html
<div class="col-md-6" id="sidebar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" routerlink="#submenu" data-toggle="collapse" (click)="toggle1()" data-target="#submenu">Color <mat-icon class="pull-right" >{{icon1 ? 'remove' : 'add' }}</mat-icon></a>
<div class="collapse" id="submenu" aria-expanded="false">
<ul class="nav" *ngFor="let colour of colours ">
<li class="nav-item"><a class="nav-link" (click)="Event(colour)" routerlink="/">{{colour.title}}</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" routerlink="#submenu2" data-toggle="collapse" data-target="#submenu2">sleeve-length <mat-icon class="pull-right" >add</mat-icon></a>
<div class="collapse" id="submenu2" aria-expanded="false">
<ul class="nav" *ngFor="let s of sleeve">
<li class="nav-item"><a class="nav-link" id={{s.id}} routerlink="/">{{s.title}}</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" routerlink="#submenu3" data-toggle="collapse" data-target="#submenu3">sizes<mat-icon class="pull-right" >add</mat-icon></a>
<div class="collapse" id="submenu3" aria-expanded="false">
<ul class="nav" *ngFor="let size of length">
<li class="nav-item"><a class="nav-link" id={{size.id}} routerlink="/">{{size.title}}</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-4" *ngFor="let x of httpdata; let i = index; ">
<div class="panel panel-default">
<div class="panel-body">
<img src="{{x.product_image}}" height="300px" width="200px">
</div>
</div>
</div>
app.component.ts
export class AppComponent implements OnInit {
constructor(private dataservice:DataserviceService,private global: AppGlobals){}
httpdata;
colours;
sleeve;
length;
ngOnInit() {
this.dataservice.getApparel(this.global.AppUrl +'getRecommendations?client=web&call_tag=stylemachine&size=15&position=0&attempt=0&user=5724&project=2226&collection=200&category=16&client-tag=women_apparels').subscribe(data=>this.httpdata=data);
this.dataservice.getFilter(this.global.AppUrl +'availableFilters?client=web&category=16').subscribe(colours=>this.colours=colours);
this.dataservice.getSleeve(this.global.AppUrl +'availableFilters?client=web&category=16').subscribe(sleeve=>this.sleeve=sleeve);
this.dataservice.getLength(this.global.AppUrl +'availableFilters?client=web&category=16').subscribe(length=>this.length=length);
}
Event(colour) {
console.log(colour);
}
}
我使用一个Pipes在我用IONIC 3制作的应用程序中做出了这种搜索和排序规则。
您可以看一下如何在角度4中制作PIPES。
否则,我可以举几个例子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.