问题标签 [angular-material-table]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - 尝试实现角材料选择表时出现问题
我正在尝试在我的角度材料表中实现选择列,我按照页面上指定的所有步骤操作:https ://material.angular.io/components/table/examples但它对我不起作用(它不显示列),可悲的是它没有显示任何错误。我留下一些代码:
桌子:
ts文件:
控制台结果:
屏幕:
angular - 角材料表 - 错误:找不到列
我正在尝试生成一个表格来学习如何使用 Angular Material 提供的表格功能,但我现在被卡住了。我猜这是我只是忽略的非常基本的东西。希望你们中的一个向导看到我做错了什么(忽略导航到其他页面部分,因为它尚未在模板中实现)。
我在控制台中收到以下错误:
.ts 文件:
我的带有模拟数据的文件:
angular - Angular Material mat-table 在过滤时不返回任何结果
我试图使用 Angular Material 包重新创建一个垫表。mat-table 示例最近得到了大规模改进,这令人惊叹。他们在此处提供了这个示例,其中包含排序和过滤功能。
我试图在我自己的应用程序的上下文中重现这一点,在 stackblitz here的一个最小示例中使用虚拟数据。
该表显示并填充了数据,但是一旦我输入多个字母,过滤器方法似乎错误地删除了所有条目,即使是不应该删除的条目。
我在这里能想到的一个区别是,在我的示例中,我在声明 dataSource: 时使用了一个类dataSource: MatTableDataSource<Match>;
,而在 Angular 人员提供的示例中,它是一个接口:dataSource: MatTableDataSource<UserData>;
。
不过,这很可能是一个红鲱鱼,因为我尝试使用界面而不是成功。非常感谢这里的任何帮助。
css - 为什么不应用 flexbox 属性?在我的模板中,
...
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat
在我的模板中,
在我的模板样式中,我有
我想控制列宽。但是在使用flex
属性时mat-column-name
,它不会被应用。作为一种解决方法,我正在使用max-width
. 它有点工作,但我不明白如何max-width
习惯让它响应
编辑:工作代码Stackblitz Demo
使用<mat-table ...
而不是<table mat-table...
用于 flexbox 启动
我正在使用
相反,我需要更改为
您的flex: 0 1 200px;
CSS 属性将变为活动状态,因为mat-row
' 的显示类型flex
现在是。
见https://material.angular.io/components/table/overview#tables-with-display-flex
在我的模板中,
...
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat
在我的模板中,
在我的模板样式中,我有
我想控制列宽。但是在使用flex
属性时mat-column-name
,它不会被应用。作为一种解决方法,我正在使用max-width
. 它有点工作,但我不明白如何max-width
习惯让它响应
编辑:工作代码Stackblitz Demo
使用<mat-table ...
而不是<table mat-table...
用于 flexbox 启动
我正在使用
相反,我需要更改为
您的flex: 0 1 200px;
CSS 属性将变为活动状态,因为mat-row
' 的显示类型flex
现在是。
见https://material.angular.io/components/table/overview#tables-with-display-flex
angular - 带有可扩展行的 Angular (7+) 材质表 - 同时有多个扩展行
我正在使用带有可扩展行的材料表
我想在行点击时展开多行。默认行为是在单击新行时关闭先前展开的行。我不希望以前的那些被关闭,每个都应该保持打开状态,直到再次点击。我怎样才能做到这一点?
angular - 在 ANGULAR 订阅中的数据数组更改后,组件(AngularMatDataTable)不会重新渲染?
我在 Angular 8 中创建父/子关系。父组件调用设置 observable 的服务调用roleList
,然后我将其传递roleList
给子组件。在子组件中,我尝试订阅子接收的 Input 变量并用新值实例化 MatDataTableSource。
问题是:子组件接收值但组件不重新渲染。在我调用应用程序中的更改(例如:将鼠标悬停到另一个更改状态的组件)之后,它确实显示了从服务接收到的数据。
这些是组件:
父组件 .ts:
父组件 .html:
这是我尝试订阅并使用订阅结果初始化 MatTableDataSource 的组件。
子组件 .ts:
子组件 .html:
编辑:
我在app.component.ts中有ChangeDetectionStrategy.OnPush。当我将其修改为默认值时,它按预期工作。但为什么它不适用于 onPush?
angular-material - 角度材料在表中组合相同的列值,并仅显示多行的单个值
我有一个名为 purchase_id 的字段,它对于多条记录是相同的。许多记录具有相同的purchase_id。目前,我为多条记录显示相同的purchase_id,但现在我想将具有相同purchase_id 的单元格组合起来,并且对于相同的记录只显示一次purchase_id 提前谢谢我的代码
angular - 如何在动态显示列单元格值的情况下有条件地更改 mat-cell 行的内容
我已经动态地渲染了列单元格值mat-table
,我的要求是mat-cell
根据渲染的列单元格值显示不同的内容。
我是 Angular 的新手,我已经尝试了我在谷歌看到的所有可能的解决方案,但没有帮助我。
考虑到我有 2 列单元格值动态呈现 1. DealerSize 2.Major Revenue
以上两列单元格值的内容应该不同。DealerSize - 用户应该能够看到复选框,Major Revenue - 用户应该能够输入最小值和最大值。
我在下面给出了复选框以及最小值和最大值的代码
如果有一种方法可以根据需要呈现行单元格数据代码,请帮助我。提前致谢。
pagination - 当我在同一html页面中的表格和表格之间切换时,材料表分页不会
当我在表格和表格之间切换时,材料表分页被禁用。没有错误被抛出,当我刷新它的启用时。我已经尽力了。请帮我解决这个问题
物料表代码 ts 代码