कोणीय 4 सामग्री तालिका एक पंक्ति को हाइलाइट करें

Question

मैं एमडी-टेबल में पूरी पंक्ति को हाइटलाइट करने का एक अच्छा तरीका ढूंढ रहा हूं।
क्या मुझे निर्देश या क्या करना चाहिए?
कोई भी इस के साथ मेरी मदद कर सकता है?

<div class="example-container mat-elevation-z8"> 
    <md-table #table [dataSource]="dataSource"> 

    <!--- Note that these columns can be defined in any order. 
      The actual rendered columns are set as a property on the row definition" --> 

    <!-- ID Column --> 
    <ng-container cdkColumnDef="userId"> 
     <md-header-cell *cdkHeaderCellDef> ID </md-header-cell> 
     <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell> 
    </ng-container> 

    <!-- Progress Column --> 
    <ng-container cdkColumnDef="progress"> 
     <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell> 
     <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell> 
    </ng-container> 

    <!-- Name Column --> 
    <ng-container cdkColumnDef="userName"> 
     <md-header-cell *cdkHeaderCellDef> Name </md-header-cell> 
     <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell> 
    </ng-container> 

    <!-- Color Column --> 
    <ng-container cdkColumnDef="color"> 
     <md-header-cell *cdkHeaderCellDef>Color</md-header-cell> 
     <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell> 
    </ng-container> 

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> 
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> 
    </md-table> 
</div> 

टेबल से: https://material.angular.io/components/table/overview

Answer 1

आप ngClass और selectedRowIndex की तरह एक ध्वज का उपयोग करके यह कर सकते हैं। जब भी पंक्ति सूचकांक क्लिक किया जाता है तो selectedRowIndex के बराबर होता है, कक्षा लागू की जाएगी।

Plunker demo

एचटीएमएल:

<!-- Add the highlight class in row definiton of md-table --> 
<!-- Add click event to pass the selected row index --> 

<md-row *cdkRowDef="let row; columns: displayedColumns;" 
     [ngClass]="{'highlight': selectedRowIndex == row.id}" 
     (click)="highlight(row)"> 
</md-row> 

सीएसएस:

.highlight{ 
    background: #42A948; /* green */ 
} 

ts:

selectedRowIndex: number = -1; 

highlight(row){ 
    this.selectedRowIndex = row.id; 
} 

Answer 2

तो, मैं इस मामले की छानबीन के साथ ही भाग गया। मैं नए 'mat-' के बजाय 'md-' का उपयोग कर रहा है, लेकिन मैं यह एक ही के बारे में हो जाएगा अनुमान लगा रहा हूँ ...

<mat-row 
    *matRowDef="let row; columns: myColumns; let entry" 
    [ngClass]="{ 'my-class': entry.someVal }"> 
</mat-row> 

मुझे लगता है कि कहीं भी नहीं मिला, मैं सिर्फ यह कोशिश की और यह काम करने के लिए हुआ, तो मुझे उम्मीद है कि यह सही है। बड़ी बात यह है कि अन्य matRowDef सामान के अंत तक 'प्रविष्टि दें' टैगिंग की गई थी। क्षमा करें मैं पार्टी के लिए बहुत देर हो चुकी हूँ। उम्मीद है कि यह किसी को कुछ अच्छा करता है।

Answer 3

table overview examples पृष्ठ में वे चयनों को संभालने के लिए SelectionModel की व्याख्या करते हैं - जो संयोग से बहु-चयन को भी संभालता है। मैं आगे बढ़ने की कल्पना करता हूं कि भविष्य में सुधारों में इसे शामिल किया जाएगा, इसलिए अब इसका उपयोग शुरू करना एक अच्छा विचार है।

selection आपके घटक में एक चयन मॉडल परिभाषित किया गया है। मुझे इसके लिए कोई वास्तविक दस्तावेज नहीं मिला लेकिन implementation बेहद सरल है।

selection = new SelectionModel<CustomerSearchResult>(false, null); 

पहले पैरामीटर allowMultiSelect तो चुने जाने की एक से अधिक आइटम एक बार सच के लिए सेट पर अनुमति देने के लिए है। जब आप नया मान सेट करते हैं तो चयन मॉडल किसी मौजूदा मान को अचयनित कर देगा।

फिर पंक्ति पर चयनित होने पर select() पंक्ति पर एक क्लिक ईवेंट जोड़ें और पंक्ति का चयन करने के लिए अपना स्वयं का सीएसएस क्लास बनाएं।

<mat-table> 
     ... 

     <mat-row *matRowDef="let row; columns: displayedColumns;" 
       [ngClass]="{ 'selected': selection.isSelected(row)}" 
       (click)="selection.select(row)"></mat-row> 

    </mat-table> 

सीएसएस वर्ग मैं जोड़ा नीचे है (नमूना अभी तक स्टाइल का उल्लेख नहीं है) और फिर आप बस अपने सीएसएस

.mat-row { 
    min-height: 65px; 

    &.selected { 
     background: #dddddd; 
    } 
} 

में जोड़ने के लिए अपने पृष्ठभूमि रंग भी अंधेरा है यदि आप 'की जरूरत पाठ रंग को उलटने के लिए खुद को शैलियों को जोड़ने की आवश्यकता होगी।

चयन को संभालने के लिए onChangeselection की घटना का उपयोग करें।

// selection changed 
    this.selection.onChange.subscribe((a) => 
    { 
     if (a.added[0]) // will be undefined if no selection 
     { 
      alert('You selected ' + a.added[0].fullName); 
     } 
    }); 

या वैकल्पिक रूप से चयनित आइटम this.selection.selected में हैं।

मुझे उम्मीद है कि mat-table इस तरह के सामान्य मामलों के लिए बेहतर हो जाता है और वे डेवलपर को सब कुछ छोड़ नहीं देते हैं। कुंजीपटल इवेंट इत्यादि जैसी चीजें चयन मॉडल के संबंध में स्वचालित रूप से संभाली जानी चाहिए।

---

सुझाव: ध्यान दें कि यदि आप

selection = new SelectionModel<CustomerSearchResult>(false, []); 

साथ एक गैर-बहु चयन संग्रह के लिए अपने SelectionModel बनाने तब selection.selected.length वास्तव में 1 और नहीं की उम्मीद 0 आइटम हो जाएगा। यह देखने के लिए कोई जांच नहीं है कि वास्तव में मॉडल में मॉडल है - यह एक बहुत ही गूंगा वर्ग है। तो यह चुने हुए चुने हुए [0] को चयनित आइटम के रूप में रखता है। इसके बजाए शून्य का प्रयोग करें। स्रोत कोड स्पष्ट करता है कि ऐसा क्यों होता है:

if (_isMulti) { 
    initiallySelectedValues.forEach(value => this._markSelected(value)); 
    } else { 
    this._markSelected(initiallySelectedValues[0]); 
    }