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

Question

<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- 有个小说明：

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

但我不明白是什么：

或拥有根据内容调整自身大小的列 意思。

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

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

Answer 1

从source 中，如果您看到指令的选择器可以用作元素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