Question

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

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

 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>

Answer 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的另一个答案应该可以帮助您指出“命名冲突” { {1}}和#errorList对象数组，您需要进行更改。但是，如果要从所选字段中获取数据，请使用errorList。对于多项选择：您需要创建方法并继续将所选值添加到数组中以供使用。一切都取决于您的用户情况。

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

Answer 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>

带有对象的mat-selection-list，这可能吗？

2 个答案: