Question

我正在尝试通过Clarity Design System过滤数据网格中的行。在documentation中，可以按以下方式获得模型属性的迭代列表，

<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>

我说

<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>

不确定是否有可能获得任何帮助。

清晰度设计系统Datagrid-遍历clrDgItems和ngFor

0 个答案: