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

Question

我一直在查看 material.angular 的 material.angular.io 文档中的垫子选择列表。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 的另一个回答应该有助于说明 "naming conflict" 你有 #errorList 和 errorList 对象数组，你需要改变。但是如果你想从选择的字段中获取数据，那么使用[value]。对于多项选择：您需要创建方法并不断将所选值添加到数组中以供您使用。一切都取决于您的用户情况。

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>

Answer 3

你可以这样做：

<mat-selection-list #book [multiple]="false">
  <mat-list-option *ngFor="let book of books" [value]="book">
    {{ book.name }}
  </mat-list-option>
</mat-selection-list>

注意：我设置了#book，也许你应该设置#err 而不是#errorList

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

mat-selection-list with an object , is it possible?

angular

angular-material

mat-list