Question

我在尝试使用Angular Material时遇到了很多困难，特别是在选择列表方面。我正在Angular材料选择列表中显示对象列表，我想从所选项目列表中获取对象。

这是我到目前为止所做的，但[value]="row"只是在我致电true时给了我rows.selectedOptions.selected[0].value：

submit(rows) {
    console.log(rows);
    console.log(rows.selectedOptions.selected[0].value);
    console.log(rows.selectedOptions.selected[0]._getHostElement().innerText); // ugly hack, but at least it gives me the text of the option
}

<md-selection-list #rows dense>
  <md-list-option *ngFor="let row of config.data" [value]="row">
    {{row.title}}
  </md-list-option>
</md-selection-list>

<div class="d-flex justify-content-end">
  <div class="p-2">
    <button md-button (click)="submit(rows)">
      <span>Submit</span>
      <md-icon aria-label="submit">arrow_forward</md-icon>
    </button>
  </div>
</div>

如何从所选选项列表中获取实际row？

Answer 1

查看API文档：https://material.angular.io/components/list/api

@Output（）selectChange：
选择该选项时发出。

所以我想用

<md-selection-list #rows dense>
  <md-list-option *ngFor="let row of config.data" (selectChange)="onSelectOptionChange($event)">
    {{row.title}}
  </md-list-option>
</md-selection-list>

将为您提供TypeScript端所需的数据：

onSelectOptionChange(value: any) {
  console.log(value);
}

未经测试，但应该可行。（没有，＆＃39; T ）

编辑：我一直在使用plunkr进行一些测试，这是我的结果：

为免费笑声提供了Plunkr： https://plnkr.co/edit/1G3bgJ2Twue0RH7CGmK2?p=preview

我一直使用您提供的相同代码：

<md-selection-list #rows dense>
  <md-list-option *ngFor="let row of config.data" 
  (selectChange)="onSelectChange($event)"
  (deselected)="onDeselected($event)"
  [checkboxPosition]="after"
  [value]="[testValue]" 
  [selected]="[testValue]">
    {{row.title}}
  </md-list-option>
</md-selection-list>

<div class="d-flex justify-content-end">
  <div class="p-2">
    <button md-button (click)="submit(rows)"> 
      <span>Submit</span>
      <md-icon aria-label="submit">arrow_forward</md-icon>
    </button>
  </div>
</div>

这是我用于测试的TypeScript

export class App {
  testValue: true;

  config = {
    data: [
      {
        title: 'Title1',
      },
      {
        title: 'Title2',
      },
      {
        title: 'Title3',
      },
      {
        title: 'Title4',
      }
    ]
  }

  constructor() {
  }

  onDeselected(value: any) {
    console.log('deselected event => ', value);
  }

  onSelectChange(value: any) {
    console.log('change => ', value);  
  }

  submit(rows) {
    console.log(rows.selectedOptions.selected.map(elements => {
      return elements._getHostElement().innerText;
    }));
  }
}

结果：

通过输入设置value是没用的：它会为option-list-item设置一个值，该值不用于任何内容。
通过输入设置selected有点无用：它在渲染时有效，但在示例中我将它们设置为true，如果我立即提交，则不会得到任何结果（{{ 1}}是一个空数组。）
rows.selectedOptions.selected输出事件无效。
selectChange输出事件无效。
我找不到比你更简单地获得Option标题的方法。这就是我以前在数组中得到的结果（猜测它更实用）：deselected
@Input（）checkboxPosition：标签是否应出现在复选框之前或之后。默认为＆＃39;在＆＃39;之后。 不，在＆＃39;之前默认为＆＃39; ！

如何从所选选项列表中获取实际console.log(rows.selectedOptions.selected.map(elements => { return elements._getHostElement().innerText; }));？

结论：你不能完全垃圾：不要使用它......

Answer 2

你可以用以下方式处理它：

在你的component.ts中：

rows: Array<string> = []; //explicitly define and init property here

toggleRow(value:string){
    if(this.rows.indexOf(value) !== -1){
      this.rows.splice(this.rows.indexOf(value), 1);
    }else{
      this.rows.push(value);    
    }
}
submit(rows) {
  console.log(rows);
}

和你的component.html：

<md-selection-list #rows dense>
  <md-list-option *ngFor="let row of config.data" (click)="toggleRow(row.title)">
    {{row.title}}
  </md-list-option>
</md-selection-list>

<div class="d-flex justify-content-end">
  <div class="p-2">
    <button md-button (click)="submit(rows)">
      <span>Submit</span>
      <md-icon aria-label="submit">arrow_forward</md-icon>
    </button>
  </div>
</div>

您还可以使用Array<any>或类似的.push()整个row对象加入rows数组（而不仅仅是.title）。。

Answer 3

我遇到了无法从MdListOption中提取值的问题。我最终使用了那种破坏目的的解决方法，但仍然：

<md-selection-list #rows dense>
  <md-list-option *ngFor="let row of config.data" (click)="clickedOnRow(row)">
    {{row.title}}
  </md-list-option>
</md-selection-list>

然后在组件中的clickedOnRow（）中跟踪我的选择。

Answer 4

我在角度5中遇到了同样的问题。我最终使用了SelectionModel并绑定了一个点击事件

<mat-selection-list #AnswerableBaseline>
     <mat-list-option *ngFor="let a of dataSourceForAnswerable" (click)="onAnswerableBaselineListClicked(a)" checkboxPosition="before">
     </mat-list-option>
</mat-selection-list>

ts档

selectionBaseline   = new SelectionModel<Your Type>(true, []);
onAnswerableBaselineListClicked(row: any) {        
    if (!this.selectionBaseline.isSelected(row)) {
        this.selectionBaseline.select(row);
    }
    else {
        this.selectionBaseline.deselect(row);
    }

}

如何从MdListOption元素中获取值？

4 个答案: