प्रत्येक पंक्ति और हेडर कॉलम के लिए "संपादित/हटाएं" बटन एमडी-टेबल घटक

Question

में 'एक्शन' है, मैं कोणीय 4 दुनिया में काफी नया हूं और मैं प्रत्येक पंक्ति के लिए "संपादित/हटाएं" बटन जोड़ने की कोशिश कर रहा हूं & एंगुलर के साथ कोणीय सामग्री डिजाइन में एमडी-टेबल घटक में हेडर कॉलम 'एक्शन' है 4. मैं यह कैसे कर सकता हूं? प्रत्येक पंक्ति के लिए अनुकूलित हेडर कॉलम & बटन। ऐसा करने के लिए उपलब्ध कोई टेम्पलेट? नीचे मेरा एचटीएमएल कोड है।

userinfo.html

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

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

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

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

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

<!-- Role Column --> 
<ng-container cdkColumnDef="authority"> 
<md-header-cell > Role </md-header-cell> 
<md-cell *cdkCellDef="let row" > {{row.authority}} </md-cell> 
</ng-container> 

<!-- Action Column 
<md-header-cell > Action </md-header-cell> 
<md-cell > <button md-raised-button >Edit</button> </md-cell> --> 

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

Answer 1

आप सही रास्ते पर हैं, तो आप सिर्फ displayedColumns सूची में एक actions आइटम जोड़ने के लिए की जरूरत है;

displayedColumns = ["username","email","userFirstName" ... ,"actions"]; 

और:

<ng-container cdkColumnDef="actions"> 
    <md-header-cell > Actions </md-header-cell> 
    <md-cell *cdkCellDef="let row" > 
     <button md-raised-button >Edit</button> 
    </md-cell> 
</ng-container> 

Answer 2

आदेश/संपादन के तर्क प्रदर्शन प्रत्येक पंक्ति के लिए नष्ट करने के लिए है, तो आप angular4-material-table पैकेज का उपयोग कर सकते हैं, कि angular4 + CDK मेज पर आधारित है।