在 Angular 项目中需要清晰框架的多个 UI 问题的帮助

Question

下面是示例 angular 项目，它实现了带有数据网格行扩展功能的示例用户列表。现在作为一个独立的 webapp，它在导航到下一页时抛出错误，如下所示：

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

运行项目的步骤：

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

运行:

启动json-server获取mock数据和加载本地消息捆绑包（cmd 终端#1） npm 运行 json-服务器
运行插件处于开发模式并监视您的文件以进行实时重新加载（cmd 终端 #2） ng 服务
有问题的代码文件路径"testplugin-ui\src\app\users*"

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

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

Answer 1

从 Datagrid expandable rows additional features 开始，您的 *clrIfExpanded 指令似乎放错了地方。

user-row-detail.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>

Answer 2

@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 建议的博客 post 以了解这里发生的事情。

在 Angular 项目中需要清晰框架的多个 UI 问题的帮助

Need help in multiple UI issues in Angular project with clarity framework

rxjs

angular

vmware-clarity