组件“mat-table”和指令“<table mat-table>”之间有什么区别？

Question

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

请注意，这种方法意味着您不能包含某些本机表 > 功能，例如 colspan/rowspan 或具有根据 > 其内容调整自身大小的列。

但我不明白什么：

或者有根据其内容手段调整自己大小的列。

您能否举一个例子，调整大小的列是什么？

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

Answer 1

从源如果看到该指令的选择可以作为一个元素使用mat-table或作为表中的属性table[mat-table]

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

选项 1 ::mat-table当您用作元素时，它使用 CSS flex-box 属性来对齐您的数据/表格，因此当您有很长的文本时，除非另有说明，否则它不会自动调整大小。请注意，使用此选项您必须妥协rowspan，colspan例如，如果需要，您不能跨越行/列

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

选项 2 ::table[mat-table]当您用作 html 表的属性时，td 负责根据单元格自动调整其内容的大小，进而基于列。所以整列得到宽度

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

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

组件“mat-table”和指令“&lt;table mat-table&gt;”之间有什么区别？