Question

我必须在angular4中使用过滤管用于sidenavbar。我有侧边栏菜单列表，如颜色，合身类型，袖子长度和女性服装网站的大小，当我点击特定列表，如大小为（s或m）的黑色时，它应该显示在pannel我点击了什么< / p>

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);
  }
}

Answer 1

只需将选定的值与某个变量绑定，然后将其显示在视图部分中，如下所示 -

export class AppComponent implements OnInit {
constructor(private dataservice:DataserviceService,private global: AppGlobals){}
...
filterSelected: any;
ngOnInit() {
  ...
}
Event(colour) {
  console.log(colour);
  this.filterSelected = colour;
}
}

视图部分中的

-

{{filterSelected}}

过滤器的产品来自sidenav的angular4

1 个答案: