0

我一直在查看 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>
4

2 回答 2

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 的另一个答案应该有助于说明您拥有哪些“命名冲突”#errorList以及errorList您的对象数组，并且您需要更改. 但是，如果您想从所选字段中获取数据，请使用[value]. 对于多项选择：您需要创建方法并不断将选定的值添加到您的数组中以供您使用。一切都取决于您的用户案例。

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

于 2019-06-19T12:29:43.887 回答
0

名称冲突是问题，只需更改#errorList为#errorlist和errorList.selectedOptions.selected.lengtherrorlist.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>
于 2019-06-19T12:48:32.887 回答