angular - 组件 'mat-table' 和指令 '<table mat-table>' 之间有什么区别？-6ren

angular - 组件 'mat-table' 和指令 '' 之间有什么区别？

转载作者：行者123 更新时间：2023-12-02 18:57:23

<mat-table>
<table mat-table ...>

我发现了类似的问题Should I use "<table mat table ... " or "<mat-table ..." ，但我还是有一个误区。Angular Material 网站 https://material.angular.io/components/table/overview#tables-with-code-display-flex-code-有一个小注释:

Note that this approach means you cannot include certain native-table >features such colspan/rowspan or have columns that resize themselves based on >their content.

但我不明白什么:

or have columns that resize themselves based on their content means.

您能否举个例子，哪些列正在调整大小？

最终，我想实现表格在移动设备上的正确显示(使用mat-table组件这更容易做到，因为他使用了Flex)，这里是一个例子https://stackblitz.com/edit/angular-mohmt5?file=app%2Ftable-basic-example.ts我想立即了解上面的注释可能会遇到哪些困难。

最佳答案

来自source如果您看到指令的选择器可以用作元素 mat-table 或表的属性 table[mat-table]

@Component({
  ...
  selector: 'mat-table, table[mat-table]',
  ...
})
export class MatTable<T> extends CdkTable<T> {}

<小时/>

Option 1: mat-table: When you use as an element it uses CSS flex-box properties to align your data/table so when you have very long text it will not resize automatically unless specified otherwise. Note using this option you have to compromise on rowspan and colspan such as if the need arises you can't span your rows/cols

Stackblitz:https://stackblitz.com/edit/angular-prq2ju

Option 2: table[mat-table]: When you use as an attribute to html table the td takes care of auto resizing its content based on the cell in turn based to the column. So the whole column gets the width

Stackblitz:https://stackblitz.com/edit/angular-pxpwet

<小时/>

现代的方法是使用 Option-1 CSS flex-box 方法，但是如果单元格中的内容很长，您可以将列宽指定为一个很大的数字，但如果您不想去很多麻烦你可以将它与Option-2 native html table/tr/td一起使用

关于angular - 组件 'mat-table' 和指令 '<table mat-table>' 之间有什么区别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58210966/

文章推荐： javascript - 方法与函数，以及其他问题

文章推荐： WebSocket 和负载平衡是瓶颈吗？

文章推荐： .htaccess - 如何让 MAMP 读取 .htaccess 文件

文章推荐： asp.net - AJAX、回发和浏览器刷新

c++ - 使用 "const cv::Mat &"、 "cv::Mat &"、 "cv::Mat"或 "const cv::Mat"作为函数参数的区别？
我已经彻底搜索过，但没有找到直接的答案。将 opencv 矩阵 (cv::Mat) 作为参数传递给函数，我们传递的是智能指针。我们对函数内部的输入矩阵所做的任何更改也会改变函数范围之外的矩阵。我读
css - 将 mat-divider 添加到 mat-select/mat-option
是否可以有一个垫子分隔线(一条水平线分隔两个垫子选项)？我试过: Cars Volvo Saab Mercedes Audi
angular - 和不被识别，但和被识别
使用的浏览器 - Chrome 67.0.3396.99 我创建了一个 DialogsModule它有一个组件 ConfirmDialog.component.ts使用以下模板 confirm-dia
angular - mat-toolbar、mat-sidenav 和 mat-sidenav-container 不是已知元素
我正在尝试使用 mat-toolbar 但出现错误: mat-menu.component.html: Responsive Navigation Menu I
css - 如何区分 mat-select 样式和 mat-paginator mat-select 样式？
我正在创建 angular 7 网络应用程序，并使用一个 mat-select 下拉菜单和一个 mat-paginator。现在我隐藏 mat-select 向下箭头。 Here is the mat
c++ - cv::Mat aaa(); 之间的区别和 cv::Mat aaa=cv::Mat();
在我的应用程序中，我有一个通过引用接收 cv::Mat 对象的函数。这是函数的声明: void getChains(cv::Mat &img,std::vector &chains,cv::
mat - 内存分析器工具 (MAT) 不显示无法访问的对象
我使用了独立的 EMA (1.5.0) 和 eclipse 插件(在 eclipse 4.5 中)来分析我的堆转储。我想查看任何无法访问的对象信息，我已尝试在我的首选项和命令行选项 -keep_un
angular-material - mat-table 如何将 mat-header 与 mat-cell 宽度对齐
我是 flex 的新手，我的垫子 table 做得很好。不幸的是，我的标题没有遵循我的单元格宽度。这是我的结果的图片。如您所见，我的标题与我的单元格不对齐。这是我的 CSS 代码，就像我说我是
angular - mat-sort 和 mat-paginator 不适用于 Angular Material mat-table
我试图在我的 Material 表上使用 mat-sort 和 mat-paginator，但似乎不起作用。 Table 确实获取了 dataSource.data 中的数据，它也显示在 mat-ta
angular - mat-sort 和 mat-paginator 不适用于 Angular Material mat-table
我试图在我的 Material 表上使用 mat-sort 和 mat-paginator，但似乎不起作用。 Table 确实获取了 dataSource.data 中的数据，它也显示在 mat-ta
css - 如何设置 mat-option 文本的样式以在悬停在每个 mat-option 文本上时在 mat-select 面板外获取文本
我想在每个 mat-option 文本上设置悬停样式，我希望文本显示在 mat-option 之外。为了实现这一点，我应用了非常高的 z-index 值，但没有任何改变。我尝试将 z-index 添加
css - 如何根据内容设置 mat-drawer-container、mat-drawer 和 mat-drawer-content 高度响应？
默认情况下 mat-drawer-container/mat-sidenav-container 和 mat-drawer/mat-sidenav 高度基于 mat-drawer-cont
Angular Material : How to use `mat-icon` as `mat-card-avatar` within `mat-card-header` ?
在 mat-card-header 中提供图像头像通过 mat-card-avatar 得到很好的支持. 在许多用例中，我们希望使用图标而不是图像作为卡片的“头像”。有没有一种简单的方法可以用图标替
html - 在 mat-grid-list 的 mat-grid-tile 组件中垂直堆叠 mat-checkboxes
我想要一个包含 2 列的网格列表，并且在这些列中我想要 2 个垂直堆叠的复选框。我看过 this question 这确实有点工作，但我想知道是否有更简洁的方法解决这个问题，因为我必须使用大量的
angular - 无法将 mat-grid-list 和 mat-list 放入 mat-dialog-content 中
更新:stackbliz https://angular-2wqf4b.stackblitz.io 我正在构建一个比较屏幕，我们可以在其中比较两个项目。我试图将这两项显示为两个 mat-cards里
Angular2 + Material : mat-toolbar casts no shadow over mat-sidenav-container despite mat-elevation-z*
试图模仿 Material guide 的外观，我无法让工具栏的阴影呈现在 mat-sidenav-container 元素之上: 显示工具栏和 sidenav 的页面，但投影不可见: 单独显示工具栏
angular - 在 mat-table parent 中使用 ngif 时，mat-filtering/mat-sort 无法正常工作
请注意，分页/排序无法正常工作。分页不显示它显示的元素数量并且排序不起作用，但是如果您删除 html 文件中的行 *ngIf="dataSource?.filteredData.length > 0"
c++ - Object Mat(args); 之间的区别 - 内存分配明智 -和 Object *Mat = new Mat(args);在 C++ 中？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Proper stack and heap usage in C++? Heap vs Stack allo
css - 当使用 Angular Material 从 mat-card-content 中选择 mat-radio 按钮时，如何将背景添加到 mat-card？
单击每个单选按钮时，我需要为每个垫卡添加背景。背景应仅适用于与单击的垫单选按钮对应的垫卡。
c++ - 如果 a 是 cv::Mat 和 cv::Mat b=a.row(1)，那么这两个 cv::Mat 实例有什么区别？
Mat a = (Mat_(3,3) = 2 int dims; //! the number of rows and columns or (-1, -1) when the arr

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城