Angular ngx-datatable 一列中的多个数据

2023-11-23

我在向 ngx-datatable 中的列添加多个 prop 时遇到了一个小问题:

columns = [
  { prop: 'semesterName', name: 'סמסטר', resizeable: false },
  { prop: 'eventName', name: 'מפגש', resizeable: false },
  { prop: 'when', name: 'מועד מפגש', resizeable: false },
  { prop: 'lecturerName', name: 'מרצה', resizeable: false },
  { prop: 'hugName', name: 'חוג', resizeable: false },
];

我需要在一列中显示两个道具。就像一列中的“eventName”和“when”一样。

该模型:

export class Course {
  semester: string;
  semesterName: string;
  courseObject: string;
  course: string;
  courseName: string;
  eventObject: string;
  event: string;
  eventName: string;
  hugName: string;
  dayOfWeek: string;
  dayOfWeekNum: string;
  where: string;
  when: string;
  lecturerName: string;
  lecturerEMail: string;
  authMembers: number;
  eventStatus: string;}

HTML:

<ngx-datatable[columns]="columns" [rows]="courses">
</ngx-datatable>

谢谢你!


弄清楚了:

要更改列名称 -让列
设置单元格内容格式(例如:日期)-让值
使用多个属性进行格式化例如:日期 -let-row

模板:

<ngx-datatable [rows]="courses">
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                סמסטר
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.semesterName}}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                מפגש
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.event}} <br> {{row.eventName}}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                מועד מפגש
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.where}} <br> {{row.when}}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                מרצה
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                <a href="mailto:{{row.lecturerEmail}}">{{row.lecturerName}}</a>
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                חוג
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.hugName}}
            </ng-template>
        </ngx-datatable-column>
    </ngx-datatable>

不需要[列]不再 - 将其从模板中删除。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular ngx-datatable 一列中的多个数据 的相关文章

随机推荐

  • df1 中不在 df2 中的所有行

    我有一个 df df1 如下所示 df1 pd DataFrame YYZ SFO 1 YYZ YYD 1 YYZ EWR 1 YYZ DFW 1 YYZ LAX 1 YYZ YYC 1 columns city1 city2 val 我有
  • 你能解释一下Java中的“isXxx”方法名称吗?

    规范之一中是否引用了以 is 开头的方法 而方法名称的后缀是属性名称 类似于 Java bean 的 getter setter 方法 例如 public boolean isConditionTrue private boolean co
  • CRM 365 callManagerInfo 插件中出现错误

    将 CRM 2013 本地升级到 CRM365 后 开始出现插件问题 每次我尝试使用插件中的 IOrganizationService 进行任何操作时 我都会收到错误 此问题仅在多服务器安装时出现 在CRM 2013版本上没有出现这种情况
  • 如何启用“启用.NET Framework 源代码步进”?

    2013 年 2 月 22 日更新 Microsoft Connect 条目有 Alok Shriram 程序经理 基类库 NET Framework 的注释 该问题现在应该得到解决 连接条目标记为已解决 已修复 这个问题现在应该得到解决
  • Android 类 BaseAdapter 中的 getItem 和 getItemId 方法的用途是什么?

    我很好奇这些方法的目的getItem and getItemId在 Android SDK 的 Adapter 类中 从描述来看 似乎getItem应该返回底层数据 所以 如果我有一个名字数组 cat dog red 我创建了一个适配器a使
  • 将数组中的连续数字分组

    我需要将连续数字添加到新数组中 如果不是连续数字 则仅将该值添加到新数组中 old array 1 2 3 5 7 8 9 20 21 23 29 我想得到这个结果 new array 1 2 3 5 7 8 9 20 21 23 29 有
  • 如何在 swift 3.0 中连接多个可选字符串?

    我正在尝试在 swift 3 中连接多个字符串 var a String a var b String b var c String c var d String a b c 编译时我收到以下错误 error cannot convert
  • 如何在 tail -f 命令后继续运行脚本

    我有以下脚本 tail f nohup out echo 5 When I press Ctrl C on tail f the script stops running the 5 is not printed How can I run
  • JScript.NET 可以用于编写 .NET 应用程序脚本吗?

    自从多发性硬化症似乎已在最新的 DLR 中终止了托管 JavaScript对于服务器端 ASP NET Futures 和客户端 Silverlight 是否有人成功使用未过时的 API 来允许使用 JScript NET 编写其应用程序对
  • Javamail API - 如何将 setFrom 更改为您想要的任何内容?

    如何将 setFrom 方法更改为我想要的方法 我可以通过我的 gmail 帐户发送电子邮件并更改 setFrom 文本 但它显示了我的username对于电子邮件 我也尝试使用我的雅虎帐户 但收到身份验证错误 我想更改发件人地址 代码如下
  • 如何绑定到 CaretIndex 又名文本框的光标位置

    嗨 我正在尝试绑定到TextBox CaretIndex属性不是DependencyProperty 所以我创建了一个Behavior 但它没有按预期工作 期望 集中注意力时 默认 0 如果我改变我的值view它应该改变我的值视图模型 如果
  • 以第一个元素作为主元的快速排序示例

    我目前正在研究快速排序 想知道当第一个 或最后一个 元素被选为枢轴点时它是如何工作的 比如说我有以下数组 15 19 34 41 27 13 9 11 44 这就是我认为发生的情况 15 19 34 41 27 13 9 11 44 piv
  • InvalidOperationException:堆栈为空

    我的应用程序工作正常 但突然停止工作并给出以下错误 InvalidOperationException Stack empty System ThrowHelper ThrowInvalidOperationException Except
  • 使用 phantomjs 的 cntlm 代理

    我正在尝试在 Windows 计算机上使用 cntlm 代理来与 IIS 上使用 PhantomJS 的 Windows 身份验证的本地 Web 应用程序进行通信 要创建代理 我正在执行以下操作 cntlm v u username dom
  • django-为什么重定向后,表单显示“无”

    我有一个表单 输入信息后 根据信息过滤数据库并进行一些计算 最后将结果显示到重定向的网址 我确实可以重定向到另一个网址并成功显示结果 但问题在于它无法显示用户提交的任何数据 只是对每个字段不显示任何内容 并且结果不是基于过滤后的查询集 比如
  • 用opencv找到手绘线的端点

    我试图找到手绘线的两个端点 我写了这个找到轮廓的片段 但终点不正确 img cv2 imread my img jpeg img gray cv2 cvtColor img cv2 COLOR BGR2GRAY Binary Thresho
  • 限制可以在范围内运行的协程的最大数量

    我正在将当前的应用程序从 Java 翻译为 Kotlin 并且遇到了这个问题 java实现过去使用线程从服务器传输数据 它将创建大约 100 个不同的线程来请求数据 但据我所知 一次运行的线程不会超过 4 个 其他线程会等待线程完成后再开始
  • JQuery 或 JavaScript:如何确定在单击锚标记超链接时是否按下了 Shift 键?

    我有一个调用 JavaScript 函数的锚标记 无论有没有 JQuery 如何确定单击链接时是否按下了 Shift 键 以下代码不起作用 因为只有按下 真实键 而不是 Shift 键 时才会触发按键 我希望如果只按下 Shift 键它就会
  • Rails 嵌套表单错误,子项必须存在

    我正在遵循教程 http www amooma de screencasts 2015 01 22 nested forms rails 4 2 我正在使用 Rails 5 0 0 1 但是当我注册酒店时 似乎酒店类别必须存在 1 个错误导
  • Angular ngx-datatable 一列中的多个数据

    我在向 ngx datatable 中的列添加多个 prop 时遇到了一个小问题 columns prop semesterName name resizeable false prop eventName name resizeable