使用 Jquery 动态调整角度/清晰度 Datagrid 列宽 - 如何？

Question

我是 Angular 新手，一直在研究 Clarity 作为 UI 组件。我玩的第一件事是 Clarity 'Datagrid'。

在这里，我想制作一个通用组件，可以配置类似“columnModel”和“data”之类的东西，这两者都来自后端。 它将在角度组件结构指令（*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"});
       });

  });
}  

我向各位专家提出的问题是“这是最佳做法吗？” 或者 有没有更好的方法来实现这一点..

提前感谢您指导我。

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，显示了您提供的描述/代码的 poc：https://stackblitz.com/edit/clarity-dark-theme-v013-zxh5ks

第 2 部分

IMO - 从长远来看，只关注 Angular 会帮助自己更多。在我使用 AngularJS 应用程序的经验中，jQuery 是导致开发人员体验不佳的原因。我认为这仍然适用于使用 Angular 构建的应用程序。有 a highly upvoted SO question 关于 Thinking in AngularJS，我相信作者写的大部分内容仍然适用于 Angular，即使 Angular 和 AngularJS 的语义不同。

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

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

我不知道您是否通过Angular tutorial 工作过，但它以一口或两节的内容很容易消化的小块得到了一些答案。

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

希望POC stackblitz 可以帮助您了解如何在没有 jQuery 的情况下完成您的用例（为 Clarity 数据网格动态设置列宽）。最后，我希望我从Angular docs 学习的经验可以帮助您找出学习框架的最佳方法。