clrDgSingleSelected 在清晰版本 3 中抛出错误答案

【问题标题】：clrDgSingleSelected is throwing error in clarity version 3clrDgSingleSelected 在清晰版本 3 中抛出错误
【发布时间】：2020-04-16 16:08:24
【问题描述】：

我正在使用 Clarity 版本 3 和 Angular 9 创建具有单选选项的 Datagrid。但这是抛出错误“错误类型错误：无法读取未定义的属性'findIndex' 在 @clr/angular 库中的 Selection.isLocked (clr-angular.js:11557)..." 并且未呈现数据网格。下面是代码sn-p： app.component.html

  <clr-datagrid [(clrDgSingleSelected)]="selectedUser" [clrDgRowSelection]="true">
   <clr-dg-column>User ID</clr-dg-column>  
   <clr-dg-column>Name</clr-dg-column>
   <clr-dg-column>Favorite color</clr-dg-column>
   <clr-dg-row *ngFor="let user of users" [clrDgItem]="user">
     <clr-dg-cell>{{user.id}}</clr-dg-cell>
     <clr-dg-cell>{{user.name}}</clr-dg-cell>
     <clr-dg-cell>{{user.color}}</clr-dg-cell>
   </clr-dg-row> 
   <clr-dg-footer>{{users.length}} users</clr-dg-footer>
  </clr-datagrid>`

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
})
export class AppComponent {
 title = 'ang9VMC3POC';`
  users = [{
     id:"1",
     name:"test1",
    color:"red"
 },
{
 id:"2",
 name:"test2",
 color:"blue"
},
{
 id:"3",
 name:"test3",
 color:"green"
},
];
selectedUser = this.users[2];
}

【问题讨论】：

任何建议将不胜感激。
您好，制作 Stackblitz 演示以查看行为很有帮助，否则很难猜测确切的错误可能是什么。 stackblitz.com/@clr-team 有首发。
这里是代码stackblitz.com/edit/clarity-v3-light-theme-dkbmev的链接

标签： angular vmware-clarity

【解决方案1】：

您正在使用 *ngFor，而您应该使用 *clrDgItems。所以你的代码看起来像：

<clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
     <clr-dg-cell>{{user.id}}</clr-dg-cell>
     <clr-dg-cell>{{user.name}}</clr-dg-cell>
     <clr-dg-cell>{{user.color}}</clr-dg-cell>
</clr-dg-row>

这里是代码https://stackblitz.com/edit/clarity-v3-light-theme-o5grmz的链接

【讨论】：