如何使用角材清單

Question

我想在選擇列表中顯示項目列表。 此列表表示對象的所有可能值。 我想預先檢查此對象中包含的現有值。

如果我的對象是“ 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;
    });
});

我需要做些什么？ 文檔非常簡潔

Answer 1

我讓它像這樣工作：

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