В чем разница между компонентом 'mat-table' и директивой '«? - PullRequest
Новая
       4

В чем разница между компонентом 'mat-table' и директивой '«?

4 голосов
/ 03 октября 2019 
<mat-table>
<table mat-table ...>

Я нашел похожий вопрос Должен ли я использовать "имеет такие функции colspan / rowspan или имеют столбцы, которые изменяют свой размер в зависимости от> их содержимого.

Но я не понимаю, что:

или имеют столбцы, которые сами изменяют размер на основена их содержание означает.

Не могли бы вы привести пример этого, какие столбцы меняют размер?

В конечном счете, я хочу добиться правильного отображения таблиц на мобильных устройствах. Устройства (с компонентом таблицы матов это проще сделать, потому что он использует Flex), вот пример этого https://stackblitz.com/edit/angular-mohmt5?file=app%2Ftable-basic-example.ts И я хочу сразу понять, какие трудности могут возникнуть с учетом приведенных выше примечаний.

1 Ответ

2 голосов
/ 03 октября 2019

Из источника , если вы видите, что селектор директивы может использоваться как элемент mat-table или как атрибут таблицы table[mat-table]

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

Опция 1 : mat-table: Когда вы используете в качестве элемента, он использует свойства flex-box 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, но если высодержание в ячейке очень длинное, вы можете указать ширину столбца для большого числа, но если вы не хотите много хлопот, вы можете использовать его с HTML-таблицей Option-2 / tr / td

...