Расширяемый ряд в угловом 6 с угловым материалом, у которого точные столбцы являются родительским рядом - PullRequest
Новая
       49

Расширяемый ряд в угловом 6 с угловым материалом, у которого точные столбцы являются родительским рядом

1 голос
/ 10 апреля 2019

Я уже участвовал в проекте по созданию углового материала с расширяемыми рядами и преуспел в их создании, сославшись на здесь . Но у меня возникла небольшая проблема, поскольку в примере, которому я следую, только один столбец для расширенной строки. Итак, мой вопрос: можно ли сделать так, чтобы у расширяемой строки был точный столбец в качестве родительской строки? И если это возможно, могу ли я привести пример / руководство?

Заранее спасибо.

Я уже пытался создать таблицу в расширенной строке, но проблема в том, что таблицу немного сложно выровнять с родительским столбцом. Я хотел бы, чтобы я мог использовать mat-table точно так же, как родительский столбец, только без [источника данных], поскольку данные, которые я пытаюсь отобразить, уже находятся в расширенной строке. 

<!-- Expanded Column - The detail row is made up of this one column -->
<ng-container matColumnDef="expandedDetail">
  <mat-cell *matCellDef="let detail"> -- Im want to use data in 'detail'
    -- table in here that has the same column as the parent table --
  </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"
        matRipple 
        class="element-row" 
        [class.expanded]="expandedElement == row"
        (click)="expandedElement = row"></mat-row>
<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
        [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
        style="overflow: hidden"> 
</mat-row>

Допустим, таблица получила 5 родительских столбцов, поэтому я ожидаю, что расширенная строка также будет иметь 5 столбцов, соответствующих ширине родительского столбца.

1 Ответ

1 голос
/ 11 апреля 2019

Вам необходимо указать в расширенной строке, сколько столбцов вы хотите охватить. Если вы хотите, чтобы он охватывал все ваши столбцы, вы можете просто использовать [attr.colspan]="displayedColumns.length".

Ваш расширенный ряд: 

<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">

Если вы хотите отобразить данные в формате таблицы, к сожалению, я думаю, что вам нужно добавить еще mat-table в вашу расширенную строку, я не думаю, что вы можете «повторно использовать» уже существующую таблицу.

Проверьте мой предыдущий ответ на подобный вопрос здесь .

Я изменил stackblitz , который я разместил там немного, чтобы он отражает ваши потребности. Отображает то же определение столбца в расширенная строка, вам просто нужно установить новый источник данных.

...