Система четкости проектирования Datagrid - итерирование как clrDgItems, так и ngFor - PullRequest
Новая
       7

Система четкости проектирования Datagrid - итерирование как clrDgItems, так и ngFor

0 голосов
/ 28 декабря 2018

Я пытаюсь отфильтровать строки в сетке данных с помощью Clarity Design System.В документации итерационный список свойств модели может быть получен следующим образом: 

<clr-datagrid>
    <clr-dg-column>User ID</clr-dg-column>
    <clr-dg-column [clrDgField]="'name'">Name</clr-dg-column>
    <clr-dg-column [clrDgField]="'creation'">Creation date</clr-dg-column>
    <clr-dg-column [clrDgField]="'pokemon.name'">Pokemon</clr-dg-column>
    <clr-dg-column [clrDgField]="'color'">Favorite color</clr-dg-column>

    <clr-dg-row *clrDgItems="let user of users">
        <clr-dg-cell>{{user.id}}</clr-dg-cell>
        <clr-dg-cell>{{user.name}}</clr-dg-cell>
        <clr-dg-cell>{{user.creation | date}}</clr-dg-cell>
        <clr-dg-cell>{{user.pokemon.name}}</clr-dg-cell>
        <clr-dg-cell>
            <span class="color-square" [style.backgroundColor]="user.color"></span>
        </clr-dg-cell>
    </clr-dg-row>

</clr-datagrid>

Моя проблема в том, что в моем приложении у меня есть дочерний контейнер внутри clr-dg-row.Как видите, здесь abc очень сложный объект в отличие от users в документации. 

<clr-datagrid>
    <clr-dg-column [clrDgField]="'customerReference'">Customer Ref.</clr-dg-column>
    <clr-dg-column [clrDgField]="'customerAddress'">Address</clr-dg-column>
    <clr-dg-column [clrDgField]="'customerName'">Customer Name</clr-dg-column>

    <clr-dg-row *clrDgItems="let def of abc;">
        <ng-container *ngFor="let xyz of def.groupResult">
              <clr-dg-cell>{{ xyz.customerReference }}</clr-dg-cell>
              <clr-dg-cell>{{ xyz.customerAddress }}</clr-dg-cell>
              <clr-dg-cell>{{ xyz.customerName }}</clr-dg-cell>
        </ng-container>
    </clr-dg-row>
</clr-datagrid>

Когда я говорю,

  1. <clr-dg-column [clrDgField]="'customerReference'">Customer Ref.</clr-dg-column>

Не сработало, тогда я попробовал,

<clr-dg-column [clrDgField]="'xyz.customerReference'">Customer Ref.</clr-dg-column>

<clr-dg-column [clrDgField]="'def.groupResult.xyz.customerReference'">Customer Ref.</clr-dg-column>

Не уверен, если это вообще возможно, любая помощь приветствуется.

...