angular - 如何从 MdListOption 元素获取值？

Question

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

这是我目前所拥有的，但是 [value]="row" 在我调用 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>

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

Answer 1

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

@Output() selectChange :
Emitted when the option is selected.

所以我想用

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

未测试，但应该可以。 (不，它不)

编辑:我一直在 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 是没有用的:它确实为选项列表项设置了一个值，该值不用于任何事情。
• 通过输入设置 selected 有点没用:它在渲染时有效，但在示例中我将它们设置为 true，如果我立即提交，我没有结果(rows.selectedOptions.selected 是一个空数组)。
• selectChange 输出事件不起作用。
• 取消选择 输出事件不起作用。
• 我找不到任何其他方法来简单地获得 Option 标题。这是我用来在数组中获取它的方法(猜想它更实用):console.log(rows.selectedOptions.selected.map(elements => {
返回元素._getHostElement().innerText；
}));

• @Input() checkboxPosition : Whether the label should appear before or after the checkbox. Defaults to 'after'. No, it defaults to 'before' !

How can I get the actual row from the list of selected options?

结论:你不能，这个组件完全是垃圾:不要使用它......