NoneMat -selection-list с объектом, это возможно?

Question

Я просматривал список выбора матов, найденный в документации к material.angular.io по адресу 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

Вы можете сделать что-то вроде этого:

      <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

Answer 2

Вам не хватает [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 может охватить все ваши пользовательские случаи.

Answer 3

Конфликт имен - это проблема, просто поменяйте #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>