angular - angular4中sidenav产品的过滤管
问题描述
我必须在angular4中为sidenavbar使用过滤管。我有侧边栏菜单列表,如女性服装网站的颜色、合身类型、袖长和尺码,当我点击特定列表(如(s 或 m)尺寸的黑色颜色时,它应该在面板中显示我点击的内容
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);
}
}
解决方案
只需将您选择的值与一些变量绑定并将其显示到视图部分,如下所示 -
export class AppComponent implements OnInit {
constructor(private dataservice:DataserviceService,private global: AppGlobals){}
...
filterSelected: any;
ngOnInit() {
...
}
Event(colour) {
console.log(colour);
this.filterSelected = colour;
}
}
在查看部分 -
{{filterSelected}}
推荐阅读
- git-bash - 错误:无法打开需求文件:[Errno 2] 没有这样的文件或目录:'requirements.txt' - GitBash Windows 10
- android - 自定义文本输入布局
- python - 使用re在python中不区分大小写替换
- javascript - 在 Python 和 JavaScript 之间传递图像数据
- unity3d - Unity 如何从 Hashset 获取变换
- express - 用于检查输入类型的列表长度的自定义指令
- reactjs - 面临未处理的拒绝(错误):无效的挂钩调用。Hooks 只能在函数组件的主体内部调用
- git - Git - 如何在从裸存储库结帐期间排除 .gitignore 文件?
- javascript - 带有多个下拉子菜单的侧边栏未正确显示
- javascript - 使用 Nodejs 和 Reactjs 从一个 javascript 文件中访问另一个文件中的变量