使用 Jquery 动态调整 angular/Clarity Datagrid 列宽 - 如何？

Question

我是 angular 的新手，一直在研究清晰度作为 UI 的组成部分。我首先研究的是清晰度 'Datagrid'。

这里我想制作一个通用组件，它可以配置为 'columnModel' 和 'data' 之类的东西，它们都来自后端。它将用于 angular 组件结构指令（*ngFor 等）以显示数据网格。这是我想出的...

app.component.ts

中的定义

columnModel = [
{header:'Id',dataIndex:'id','width':50},
{header:'Name',dataIndex:'name','width':100},
]

data : [
          {id: 1, name: 'Name1',  age: 1, rem: 'aaassssssssssssss'} ,
          { id: 2, name: 'Name2', age: 1, rem: 'aaassssssssssssss'},
          { id: 3, name: 'Name3', age: 1, rem: 'aaassssssssssssss'},
]

所以这就是我所做的。（可能是因为对 Clarity n Angular 缺乏更好的理解）..我使用了 jQuery.....

在主机组件的 'ngOnInit' 上，我使用 jquery 在每个结果行中设置 'data-columns' 和 'data-cells' 的 'width'..基于'colModel' 以上..似乎有效！！！

jQuery代码：

ngOnInit() {

const jqModel = this.colModel;

$(document).ready(function() {


    $(".datagrid-column").each(function(indx) {

       $(this).attr("style",function(i,v){return "max-width:" + 
                 jqcolModel[indx].width +"px;width:" + 
                               jqcolModel[indx].width+"px;"});

    });


    $(".datagrid-row-master").each(function(indx) {

       $(this).children().each(function(indx) {
           $(this).attr("style",function(i,v){return "max-width:" + 
                  jqcolModel[indx].width +"px;width:" +                  
                                         jqcolModel[indx].width+"px"});
       });

  });
}

我想问各位专家的问题是 'Is this a best practise ?' 或者 有没有更好的方法来实现这个..

在此先感谢您的指导。

Answer 1

我要把答案分成两部分。第一部分是我将如何开始构建一个 可配置 的数据网格，如问题中所述。第二部分纯粹是我对 Angular 使用 jQuery 和一般学习 Angular 的看法。

第 1 部分

清晰度数据网格是声明性的。这意味着您只声明您的用例所需的东西。例如 - 如果您需要页脚或过滤器，您可以按照文档中的描述添加页脚或过滤器，数据网格会处理其余部分。

在您的特定情况下，您似乎需要用于设置列宽的模型，因此我将使用 angular 提供的内置绑定，方法是声明对本机样式属性的宽度绑定，例如这个：

<clr-dg-column [style.width.px]="indexLookup('id')">ID</clr-dg-column>

请注意 style.width.px 两边的括号……它告诉 Angular 绑定到 indexLookup 函数提供的值。查找函数只是简化了上面提供的 columnModel 以获取提供的索引值。

这是一个简单的 StackBlitz，显示了您提供的 description/code 的 poc：https://stackblitz.com/edit/clarity-dark-theme-v013-zxh5ks

第 2 部分

IMO - 长期运行只关注 Angular 对自己更有帮助。根据我使用 AngularJS 应用程序的经验，jQuery 是导致开发人员体验不佳的原因。我认为这仍然适用于使用 Angular 构建的应用程序。 a highly upvoted SO question 关于 AngularJS 中的思考，我相信作者写的大部分内容仍然适用于 Angular，即使 Angular 和 AngularJS 的语义不一样。

Modern Angular Framework 中有很多东西需要掌握。 IMO，我会专注于易于消化的小部分并掌握它们，然后再尝试引入其他模块或库来解决问题。例如，您可能会关注以下三个领域，以扩展 Angular 提供的一些基本知识：

数据绑定：我可以在组件或 HTMLElement 中绑定什么？它如何与 @Inputs 和 @Outputs 一起使用？绑定到动态值的效果是什么？当值发生变化时会发生什么？
@Inputs 和 @Outputs：它们是什么？你为什么要使用它们？
Component Lifecycle: 提供了哪些生命周期钩子？他们什么时候被调用，为什么？绑定到生命周期挂钩之一的一些常见用例是什么？

我不知道您是否已经完成了 Angular tutorial，但它得到了一些小块的答案，这些答案很容易在一两个会话中消化。

当我第一次开始将我的 AngularJS 知识应用到 Angular 时，文档起初似乎难以理解。我发现花时间（经常）回到 cheatsheet and the Fundamentals/Components & Templates 并重新阅读内容是值得的，因为我越来越多地使用框架并需要使用它提供的更多东西。当我第一次开始使用 Angular 时，我每周都会这样做几次，因为它帮助我提高了工作效率。

希望 POC stackblitz helps you understand your how your use case (dynamically setting column widths for a Clarity datagrid) can be accomplished without jQuery. Finally, I hope my experience learning from the Angular docs 能帮助您找到学习该框架的最佳方式。

使用 Jquery 动态调整 angular/Clarity Datagrid 列宽 - 如何？

Dynamic sizing of angular/Clarity Datagrid Column Widths using Jquery - How to?

vmware-clarity

第 1 部分

第 2 部分