如何使用角度材料列表

时间:2017-10-11 12:43:08

标签: angular angular-material2

我想在选择列表中显示项目列表。此列表表示对象的所有可能值。我想预先检查此对象中包含的现有值。

如果我的对象是" foo"。 然后我希望foo.items中的所有值都在项目列表中进行预检查。

template.html

 <mat-selection-list #itemList>
    <h3 mat-subheader>Items</h3>
    <mat-list-option *ngFor="let item of items"> {{items.name}} </mat-list-option>
  </mat-selection-list>

component.ts

ngOnInit() {
this.route.url.subscribe(url => {

  this.itemService.findAll().subscribe(items => {
    this.items = items;
  });

  const options: string[] = [];
  options['include'] = 'items';
  this.route.params
    .switchMap((params: Params) => this.fooService.findById(params['id'], options))
    .subscribe((item) => {
      this.foo = foo;
    });
});

我需要做些什么呢?文档非常简洁

1 个答案:

答案 0 :(得分:0)

我这样工作:

<mat-selection-list #filterList name="filterList" [(ngModel)]="filter" ngDefaultControl>
  <mat-list-option *ngFor="let option of filterOptions" value="{{ option.value }}">
    {{ option.title }}
  </mat-list-option>
</mat-selection-list>
  ngOnInit() {
    this.filterList.selectedOptions.onChange.subscribe(item => {
      item.added.map(added => this.filters.push(added.value));
      item.removed.map(removed => this.filters = this.filters.filter((val: any) => {
        return val !== removed.value;
      }));
    });
  }