Rozsuwane rzędy stołu w kątowym 4 z kanciastym materiałem

Jak wspomniano

tutaj
https://github.com/angular/mat ... 30404
Andrew Seguin, jest to już wykonalne po wyjęciu z pudełka: używając predykatu

when

.
Zobacz ten przykład:

https://stackblitz.com/edit/an ... -rows
https://stackblitz.com/edit/an ... -rows
(thx to Lakston)
https://i.stack.imgur.com/Di7Lf.gif
W tagu

mat-table

musisz użyć komponentu

mat-row

z dyrektywą

matRipple

. Kliknięcie na ciąg spowoduje przypisanie elementu ciągu do zmiennej

extendedElement

:

<mat-row *matRowDef="let row; columns: displayedColumns;"

 matRipple 

 class="element-row" 

 [class.expanded]="expandedElement == row"

 (click)="expandedElement = row">

</mat-row>

Ale teraz musimy dodać naszą rozszerzoną linię, która jest domyślnie ukryta i zostanie wyświetlona, ​​jeśli użytkownik kliknie powyższą linię:

<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"

 [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"

 style="overflow: hidden"> 

</mat-row>

Wspomniany już predykat

when

jest tutaj ważny. Powoduje to wywołanie funkcji

isExpansionDetailRow

zdefiniowanej w samym komponencie i sprawdzenie, czy wiersz ma właściwość

detailRow

:

isExpansionDetailRow = (row: any) => row.hasOwnProperty('detailRow');

Począwszy od RC0

pierwszym parametrem jest indeks:

isExpansionDetailRow = (i: number, row: any) => row.hasOwnProperty('detailRow');

Jeśli chcesz mieć rozszerzony widok dla każdego wiersza, musisz dodać „ExpansionDetailRow” identyfikowaną przez właściwość

detailRow

dla każdego wiersza, na przykład:

connect(): Observable<Element[]> {

 const rows = [];

 data.forEach(element => rows.push(element, { detailRow: true, element }));

 return Observable.of(rows);

}

Jeśli zarejestrujesz zmienną

rows

w danych wyjściowych konsoli, będzie wyglądać tak:
https://i.stack.imgur.com/uMgzW.png

EDYCJA: PEŁNY PRZYKŁAD KORZYSTANIA Z DYREKTYWY
>
Mata stołowa z możliwością rozbudowy wierszy (sortowanie, paginacja i filtrowanie
https://stackblitz.com/edit/an ... rting
)

Nie jest to możliwe po wyjęciu z pudełka, ale można to rozwiązać za pomocą niewielkiego niestandardowego kodu. Spojrzeć na

tej dyskusji
https://github.com/angular/material2/issues/5936
i

ta decyzja
https://plnkr.co/edit/ZL6OnWwV ... eview
(nie ode mnie, ale do podstawy tej odpowiedzi).
W skrócie: użyj tabeli materiałów i kliknij przycisk Dodaj metodę do wierszy:

<md-row *mdRowDef="let row; columns: displayedColumns; let index=index" (click)="expandRow(index, row)" #myRow></md-row>

Dodaj komponent dla obszaru rozszerzonego.

row_detail.html

zawiera kod HTML znajdujący się w obszarze rozszerzonym.

@Component({

 selector: 'app-inline-message',

 templateUrl: 'row_detail.html',

 styles: [`

 :host {

 display: block;

 padding: 24px;

 background: rgba(0,0,0,0.03);

 }

 `]

})

export class InlineMessageComponent {

 @Input() content1: string;

 @Input() content2: string;

}

W komponencie, w którym znajduje się tabela, potrzebujesz metody, aby rozwinąć wiersz. Najpierw dodaj to do swojego komponentu ...

expandedRow: number;

@ViewChildren('myRow', { read: ViewContainerRef }) containers;

... a następnie dodaj metodę:

/**

 * Shows the detail view of the row

 * @param {number} index

 */

expandRow(index: number, row: DataFromRowFormat) { if (this.expandedRow != null) {

// clear old message

 this.containers.toArray()[this.expandedRow].clear();

 } if (this.expandedRow === index) {

 this.expandedRow = null;

 } else {

 const container = this.containers.toArray()[index];

 const factory: ComponentFactory<InlineMessageComponent> = this.resolver.resolveComponentFactory(InlineMessageComponent);

 const messageComponent = container.createComponent(factory); messageComponent.instance.content1= "some text";

 messageComponent.instance.content2 = "some more text";

 }

}

Kiedy CDK był jedynym sposobem na uzyskanie czegoś zbliżonego do

Material Table

, użycie

md-row

na zwykłej tabeli było realną alternatywą, ale od tego czasu

@ angular/material 2.0.0-beta.12

porzucił tabele

CDK

i ma teraz własne tabele danych, które mogą odpowiadać Twoim potrzebom. Zobacz dokumentację poniżej:
https:// material.angular.io/components/table/overview
https://material.angular.io/co ... rview

W ten sposób możesz to zrobić za pomocą Angular Material. Ten przykład zawiera paginację i jeden przykład z mat-sort-header w kolumnie „name”. Musiałem zastąpić paginator Mat i wykonać niestandardowe sortowanie, aby upewnić się, że rozwijany ciąg nadal znajduje się u swojego rodzica, gdy był sortowany. Ten przykład pozwala również na jednoczesne otwarcie wielu linii i zamknięcie wszystkich linii
https://stackblitz.com/edit/an ... s6rfz
https://stackblitz.com/edit/an ... s6rfz