Система четкости Datagrid - итерируйте как clrDgItems, так и ngFor

Я пытаюсь отфильтровать строки в сетке данных с помощью 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>

Это не сработало, тогда я попытался,

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

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

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

0 ответов

Другие вопросы по тегам