-2

下面是示例 Angular 项目，它实现了具有数据网格行扩展功能的示例用户列表。现在作为一个独立的 web 应用程序，它在导航到下一页时会抛出错误，如下所示： 在此处输入图像描述

如果我在父组件中评论“”。错误将消失。

运行项目的步骤：

先决条件： 1. node.js 6.9 或更高版本 2. npm install 3. npm install -g json-server

跑：

  1. 启动 json-server 以获取模拟数据并加载本地消息包（cmd 终端 #1） npm run json-server
  2. 在开发模式下运行插件并监视您的文件以进行实时重新加载（cmd终端＃2） ng serve
  3. 有问题的代码文件路径“testplugin-ui\src\app\users*”

这是带有代码 https://drive.google.com/open?id=1Meeo_SXZEJfYyboihimJGr2DtJHeMP8k 或 https://nofile.io/f/q4FerHzV0Z0的项目种子

由于我需要 json-server，我正在上传示例项目而不是 plunker/stackblitz。让我知道这段代码有什么问题。

4

2 回答 2

3

从Datagrid expandable rows additional features看来，您将*clrIfExpanded指令放在错误的位置。

用户行详细信息.component.ts

<ng-template ngFor let-child [ngForOf]="children" *clrIfExpanded>
    <clr-dg-row-detail>
        <clr-dg-cell>{{child.username}}</clr-dg-cell>
        <clr-dg-cell>{{child.fullName}}</clr-dg-cell>
        <clr-dg-cell>{{child.role}}</clr-dg-cell>
    </clr-dg-row-detail>
</ng-template>

代替

<ng-template ngFor let-child [ngForOf]="children">
    <clr-dg-row-detail *clrIfExpanded>
        <clr-dg-cell>{{child.username}}</clr-dg-cell>
        <clr-dg-cell>{{child.fullName}}</clr-dg-cell>
        <clr-dg-cell>{{child.role}}</clr-dg-cell>
    </clr-dg-row-detail>
</ng-template>
于 2018-03-17T00:26:34.860 回答
1

@shravan，

代码有很多问题，包括至少 35 个循环依赖警告……无论如何，您可能想要重构您的代码，但暂时尝试将您的 UserRowDetailComponent 更改为：

@Component({
  selector: 'user-row-detail',
  templateUrl: './user-row-detail.component.html',
  encapsulation: ViewEncapsulation.Emulated
})
export class UserRowDetailComponent implements OnInit, OnDestroy {
  @Input() children: Array<User>;

  constructor(private cd: ChangeDetectorRef) {
      console.log("calling UserRowDetailComponent Comp constructor!");
  }

  ngOnInit() {
    this.cd.detectChanges(); //Force change detection here
    console.log("calling detectChanges user-row-detail from OnInit!");
  }

  ngOnDestroy() {
      console.log("calling UserRowDetailComponent onDestroy!");
  }
}

如您所见，我添加了强制更改检测。您可能需要查看 @Vikas 建议的博客文章以了解此处发生的情况。

于 2018-03-17T13:16:42.603 回答