mat-selection-list 有一个对象，有可能吗？答案

【问题标题】：mat-selection-list with an object , is it possible?mat-selection-list 有一个对象，有可能吗？
【发布时间】：2019-11-02 04:25:34
【问题描述】：

我一直在查看 material.angular.io/components/list/overview 的 material.angular.io 文档中的 mat-selection-list

我想使用对象数组而不是字符串数组。文档有

 typesOfShoes: string[] = ['Falta passar fio', 'Peça oxidada'];

这似乎可行，但下面的我的对象不起作用。我做错了什么？还是这不可能？

errorList = [
    { id: 1234, type: 'A1', description: 'dsfdsfdfgdgdgfio', selected:false },
    { id: 4567, type: 'C6', description: 'Pesdffsdça sdfsd', selected:false },
    { id: 7890, type: 'A5', description: 'sdfdsfc', selected:false }
];

<mat-selection-list #errorList class="area-block ">
    <mat-list-option *ngFor="let err of errorList " style="color: #000000;">
        {{err.type}}           
    </mat-list-option>
</mat-selection-list>

<p style="color: #000000;" class="area-block">
    Options selected: {{errorList.selectedOptions.selected.length}}
</p>

【问题讨论】：

标签： angular angular-material mat-list

【解决方案1】：

你不见了[value]:

<mat-selection-list #errorList class="area-block">
   <mat-list-option *ngFor="let err of errorList" [value]="err" style="color: #000000;">
      {{err.type}}
   </mat-list-option>
</mat-selection-list>

编辑：

不确定，究竟是什么不起作用，但如果您只想显示所选项目的数量，那么@Srinivasan Sekar 的另一个答案应该可以帮助您了解哪些状态“命名冲突”@ 987654324@ 和 errorList 您的对象数组，您需要更改。但是，如果您想从选定的字段中获取数据，请使用[value]。对于多项选择：您需要创建方法并不断将所选值添加到您的数组中以供您使用。一切都取决于您的用户案例。

Stackblitz 可能涵盖您的所有用户案例。

【讨论】：

[value]="err.id" ??
@SrinivasanSekar 这取决于 OP 需要绑定什么。不确定到底是什么不起作用。

【解决方案2】：

名称冲突是问题，只需将#errorList 更改为#errorlist 并将errorList.selectedOptions.selected.length 更改为errorlist.selectedOptions.selected.length

<mat-selection-list #errorlist class="area-block ">
        <mat-list-option *ngFor="let err of errorList " style="color: #000000;">
       {{err.type}}

            </mat-list-option>
          </mat-selection-list>

          <p  style="color: #000000;" class="area-block ">
              Options selected: {{errorlist.selectedOptions.selected.length}}
            </p>

【讨论】：