组件“ 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伸缩框属性来对齐数据/表，因此当文本很长时，它将不会自动调整大小除非另有说明。请注意，使用此选项时，您必须在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一起使用