mat-selection-list с объектом, это возможно? - PullRequest
Новая
       37

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

0 голосов
/ 19 июня 2019

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

Ответы [ 2 ]

1 голос
/ 19 июня 2019

Вы пропали без вести [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>

Edit:

Не уверен, что именно не работает, но если вы хотите показать только количество выбранных элементов, тогда другой ответ @Srinivasan Sekar должен помочь, в котором говорится о "конфликте имен", который у вас есть #errorList и errorList массив ваших объектов, и вам нужно изменить. Но если вы хотите получить данные из выбранного поля, используйте [value]. Для множественного выбора: вам нужно создать метод и продолжать добавлять выбранные значения в ваш массив для вашего использования. Все зависит от вашего пользовательского случая.

Stackblitz может охватывать все ваши пользовательские случаи.

0 голосов
/ 19 июня 2019

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