it-swarm.asia

Genişletilebilir masa sıraları, açısal malzeme ile açısal 4'tür

Köşeli malzeme tablolarında satırları nasıl genişletilebilir yapardınız? Bir gereklilik, köşeli malzeme tablosunu kullanmam gerektiğidir. Ayrıca burada olarak verilen bilgilere malzeme akordeonunu kullanmayı tercih ederim.

Satıra tıklamak ve her sütun için farklı bilgiler göstermek istiyorum. Aşağıdaki gibi bir şey arıyorum. 1. satıra tıklarsanız, 2. ve 3. sıralar farklı verilerle görüntülenir.

 enter image description here

18
Simon

Daha önce belirtildiği gibi, Andrew Seguin tarafından burada kutudan çıkarılabilir durumdadır: when yüklemini kullanmak.

Bu örneğe bakın: https://stackblitz.com/edit/angular-material-expandable-table-rows (Lakston'a teşekkürler)

demo

mat-table etiketinin içinde, mat-row bileşenini matRipple yönergesiyle birlikte kullanmanız gerekir. Bir satıra tıkladığınızda, satır elemanı expandedElement değişkenine atanır:

<mat-row *matRowDef="let row; columns: displayedColumns;"
        matRipple 
        class="element-row" 
        [class.expanded]="expandedElement == row"
        (click)="expandedElement = row">
</mat-row>

Ancak şimdi genişletilmiş satırımızı eklemeliyiz, bu varsayılan olarak gizlidir ve kullanıcı yukarıdaki satıra tıklarsa gösterilecektir:

<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
        [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
        style="overflow: hidden"> 
</mat-row>

Önemli burada daha önce bahsedilen when yüklemidir. Bu, bileşenin kendisinde tanımlanmış bir isExpansionDetailRow işlevini çağırır ve satırın detailRow özelliğine sahip olup olmadığını denetler:

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

RC0 yılından bu yana ilk param indeksidir:

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

Her satır için genişletilmiş bir görünüm elde etmek istiyorsanız, aşağıdaki gibi her satır için detailRow özelliği tarafından tanımlanan bir "ExpansionDetailRow" eklemelisiniz:

connect(): Observable<Element[]> {
    const rows = [];
    data.forEach(element => rows.Push(element, { detailRow: true, element }));
    return Observable.of(rows);
}

rows değişkenini konsol çıktısına kaydederseniz, şöyle görünür:

console output

EDIT: DOĞRUDAN KULLANIM KOMPLE ÖRNEK

Mat Tablo genişletilebilir satırlar (sıralama, sayfalama ve filtreleme)

55
Philipp Kief

Kutudan çıkartılamaz, ancak küçük bir özel kodla çözebilirsiniz. Bu tartışmaya ve bu çözüme bakınız (benden değil, bu cevabın temeli).

Kısacası: Malzeme tablosunu kullanın ve satırlara bir tıklama yöntemi ekleyin:

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

Genişletilmiş alan için bir bileşen ekleyin. row_detail.html, genişletilmiş alandaki html'yi içerir.

@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;
}

Tablonun yaşadığı bileşeninizde, satırı genişletme yöntemine ihtiyacınız vardır. İlk önce bunu bileşeninize ekleyin ...

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

... ve ardından yöntemi ekleyin:

/**
   * 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";
    }
}
4
Tobii

Köşeli Malzeme ile nasıl yapabileceğinizi İşte. Bu örnek sayfalandırma ve 'isim' sütunundaki mat-sort-başlığına sahip bir örnek içermektedir. Mat sayfa yazıcısını geçersiz kıldım ve genişletilebilir satırın, ana öğenin sıralama sırasında hala ebeveyni olduğundan emin olmak için özel bir sıralama yaptım. Bu örnek aynı anda birden fazla satır açmanıza ve tüm satırları kapatmanıza olanak sağlar

https://stackblitz.com/edit/angular-material2-issue-zs6rfz

1
Braden Brown

CDK, bir Material Table 'ye yakın bir şey elde etmenin tek yolu olduğunda, normal bir tabloda md-row' lar kullanmak uygun bir alternatiftir, ancak @angular/material 2.0.0-beta.12, CDK tablolarını çektikten ve şimdi ihtiyaçlarınızı karşılayabilecek kendi Veri Tablolarına sahip. Aşağıdaki belgelere bakın:

https://material.angular.io/components/table/overview