मुझे मॉडल के बिना कोणीय सामग्री तालिका का उपयोग करने की आवश्यकता है, क्योंकि मुझे नहीं पता कि सेवा से क्या आएगा।

इसलिए मैं अपने MatTableDataSource और displayedColumns को इस तरह के घटक में गतिशील रूप से प्रारंभ कर रहा हूं:

टेबलकंपोनेंट :

ngOnInit() {

this.vzfPuanTablo = [] //TABLE DATASOURCE

//GET SOMETHING FROM SERVICE 
this.listecidenKisi = this.listeciServis.listecidenKisi;
this.listecidenVazife = this.listeciServis.listecidenVazife;

//FILL TABLE DATASOURCE 
var obj = {};
for (let i in this.listecidenKisi ){
    for( let v of this.listecidenVazife[i].vazifeSonuclar){
        obj[v.name] = v.value;
    }
    this.vzfPuanTablo.push(obj);
    obj={};
}

//CREATE DISPLAYED COLUMNS DYNAMICALLY
this.displayedColumns = [];
for( let v in this.vzfPuanTablo[0]){
    this.displayedColumns.push(v);
}

//INITIALIZE MatTableDataSource
this.dataSource = new MatTableDataSource(this.vzfPuanTablo);
}

कोड का सबसे महत्वपूर्ण हिस्सा यहाँ है:

for( let v in this.vzfPuanTablo[0]){
    this.displayedColumns.push(v);
}

मैं यहां गतिशील रूप से displayedColumns बना रहा हूं, इसका अर्थ है; यहां तक ​​कि मुझे नहीं पता कि सेवा से क्या आएगा, मैं इसे तालिका में दिखा सकता हूं।

उदाहरण के लिए displayedColumns ऐसा हो सकता है:

  • ["एक दो तीन चार पांच" ]

या

  • ["ढेर", "अतिप्रवाह", "सहायता", "मुझे]

लेकिन यह कोई समस्या नहीं है क्योंकि मैं इसे संभाल सकता हूं।


लेकिन जब मैं इसे HTML में दिखाना चाहता हूं, तो मैं ठीक से नहीं दिखा सकता क्योंकि matCellDef बात:

टेबलएचटीएमएल:

    <mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">

        <ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol}}">
            <mat-header-cell *matHeaderCellDef>{{disCol}}</mat-header-cell>
            <mat-cell *matCellDef="let element "> {{element.disCol}}
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

मेरी समस्या यहाँ है:

{{element.disCol}}

वास्तव में, मैं सेल में element."disCol's value" प्रदर्शित करना चाहता हूं, लेकिन मुझे नहीं पता कि मैं यह कैसे कर सकता हूं।

अन्यथा, इस element."disCol's value" चीज़ को छोड़कर सब कुछ ठीक है।


जब मैं {{element.disCol}} प्रदर्शित करने के लिए value of element that has disCols's value का उपयोग करता हूं, तो सभी सेल इस तरह खाली होते हैं:

enter image description here

अन्य उदाहरण जो केवल {{element}} का उपयोग कर रहे हैं:

enter image description here


जैसा कि आप देख सकते हैं:

  1. तालिका डेटा स्रोत गतिशील रूप से बदल रहा है। इसका मतलब है कि मैं आसानी से {{element.ColumnName}} का उपयोग नहीं कर सकता, क्योंकि मैं यह भी नहीं जानता कि यह क्या है।

    • पहला उदाहरण प्रदर्शित कॉलम = ['वज़ीफ़', 'एडसोयाद', 'किर्मिज़ी', 'मावी', 'येसिल', 'साड़ी'];
    • दूसरा उदाहरण प्रदर्शित कॉलम = ['मुहासेबे', 'डेर्स', 'एगिटिम', 'हरिसी'];
  2. matHeaderCellDef सही है, क्योंकि यह सीधे {{disCol}} का उपयोग कर रहा है।

लेकिन मुझे डिस्कोल का मान पढ़ना है, और सेल में element.(disCol's value) प्रदर्शित करना है।

मैं यह कैसे कर सकता हूं?

21
mevaka 17 अप्रैल 2018, 03:19

3 जवाब

सबसे बढ़िया उत्तर

मुझे समाधान मिल गया :) यह बहुत आसान है लेकिन मैं पहली बार में नहीं देख सका :) केवल उसी तरह:

        <mat-cell *matCellDef="let element "> {{element[disCol]}}
        </mat-cell>

मुझे {{element[disCol]}} का उपयोग केवल HTML में करना चाहिए।

अब, सब ठीक है :)

33
mevaka 17 अप्रैल 2018, 10:51

@ mevaka's . पर आधारित एक पूर्ण कामकाजी उदाहरण के लिए

जहां jobDetails$ मदों की सरणी है।

columns$, Object.keys(jobDetails$[0]) के बराबर है, तो यह केवल एक string[] है

  <table mat-table [dataSource]="jobDetails$ | async">

    <ng-container *ngFor="let disCol of (columns$ | async); let colIndex = index" matColumnDef="{{disCol}}">
      <th mat-header-cell *matHeaderCellDef>{{disCol}}</th>
      <td mat-cell *matCellDef="let element">{{element[disCol]}}</td>
    </ng-container>


    <tr mat-header-row *matHeaderRowDef="(columns$ | async)"></tr>
    <tr mat-row *matRowDef="let row; columns: (columns$ | async)"></tr>
  </table>
4
Jack 12 जून 2019, 13:04

आप डायनेमिक कॉलम, सॉर्टिंग, पेजिनेशन, कॉलम लेवल फ़िल्टरिंग, कॉलम की रीऑर्डरिंग, कॉलम का आकार बदलने के साथ कोणीय डेटाटेबल के लिए नीचे दिए गए लिंक का उल्लेख कर सकते हैं।

https://www.youtube.com/watch?v=zDvzBK-xyAM

0
borchvm 21 मई 2020, 11:27