Two way Selection Binding in Angular Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live! The [wrap] tag is in the process of being burninatedRecommended way to embed PDF in HTML?How can I know which radio button is selected via jQuery?How do I make a placeholder for a 'select' box?Cannot display HTML stringAngular HTML bindingBinding select element to object in AngularCan't bind to 'ngModel' since it isn't a known property of 'input'Sorting with dynamic column - Angular materialIn Angular, how do I get the row index on a Mat-Table with expandable content?Add Multiple columns for same header on click button dynamically in mat-table angular
Why do we bend a book to keep it straight?
Can you use the Shield Master feat to shove someone before you make an attack by using a Readied action?
How to compare two different files line by line in unix?
What do you call the main part of a joke?
An adverb for when you're not exaggerating
When a candle burns, why does the top of wick glow if bottom of flame is hottest?
How to Make a Beautiful Stacked 3D Plot
How do I stop a creek from eroding my steep embankment?
How could we fake a moon landing now?
Is it fair for a professor to grade us on the possession of past papers?
Using audio cues to encourage good posture
Extracting terms with certain heads in a function
How do I make this wiring inside cabinet safer? (Pic)
Can an alien society believe that their star system is the universe?
Do I really need to have a message in a novel to appeal to readers?
Circuit to "zoom in" on mV fluctuations of a DC signal?
What is the meaning of the simile “quick as silk”?
How to answer "Have you ever been terminated?"
Significance of Cersei's obsession with elephants?
Do square wave exist?
How do I find out the mythology and history of my Fortress?
また usage in a dictionary
How would a mousetrap for use in space work?
Dating a Former Employee
Two way Selection Binding in Angular
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!
The [wrap] tag is in the process of being burninatedRecommended way to embed PDF in HTML?How can I know which radio button is selected via jQuery?How do I make a placeholder for a 'select' box?Cannot display HTML stringAngular HTML bindingBinding select element to object in AngularCan't bind to 'ngModel' since it isn't a known property of 'input'Sorting with dynamic column - Angular materialIn Angular, how do I get the row index on a Mat-Table with expandable content?Add Multiple columns for same header on click button dynamically in mat-table angular
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
-1
There are four tables here and all are linked to each other. If you select any cell in the first table then the details which are mapped to that selected cell only be displayed in remaining tables.This is done by me but i want to get the same in two way like if you select the cell in 2,3 or 4th table the details mapped to that must display.[enter image description here][1]
IF you feel to change the format of json is also fine.
<div class="full" *ngIf="!mtc">
<div id="wrapper">
<div class="user-table" id="first">
<p>USER STORIES</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="UserStorySource">
<th mat-header-cell *matHeaderCellDef>User Story Source</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStorySource</button></td>
</ng-container>
<ng-container matColumnDef="UserStoryId">
<th mat-header-cell *matHeaderCellDef>User Story Id</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStoryId</button>
</td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Title</button></td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Description</button></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsUS"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsUS;" ></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>TASKS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="TaskSource">
<th mat-header-cell *matHeaderCellDef>Task Source</th>
<td mat-cell *matCellDef="let element">
element.MappedTask[0].TaskSource</td>
</ng-container>
<ng-container matColumnDef="TaskCaseId">
<th mat-header-cell *matHeaderCellDef>Task Id</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask,element.UserStories)"> element.MappedTask[0].TaskCaseId</button> </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask,element.UserStories)"> element.MappedTask[0].Title </button></td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask,element.UserStories)"> element.MappedTask[0].Description</button> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsT"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsT;"></tr>
</table>
</div><br>
</div>
</div>
<div id="wrapper">
<br>
</div>
<div id="wrapper">
<div class="user-table" id="first">
<p>TEST CASE</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="TestCaseSource">
<th mat-header-cell *matHeaderCellDef>Test Case Source</th>
<td mat-cell *matCellDef="let element">element.MappedTestCase[0].TestCaseSource </td>
</ng-container>
<ng-container matColumnDef="TestCaseId">
<th mat-header-cell *matHeaderCellDef>Test Case Id</th>
<td mat-cell *matCellDef="let element"> element.MappedTestCase[0].TestCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.MappedTestCase[0].Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.MappedTestCase[0].Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsTC"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsTC;"></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>BUGS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="BugsSource">
<th mat-header-cell *matHeaderCellDef>Bugs Source</th>
<td mat-cell *matCellDef="let element">element.MappedBugs[0].BugsSource </td>
</ng-container>
<ng-container matColumnDef="BugsCaseId">
<th mat-header-cell *matHeaderCellDef>Bugs ID</th>
<td mat-cell *matCellDef="let element"> element.MappedBugs[0].BugsCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.MappedBugs[0].Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.MappedBugs[0].Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsB"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsB;"></tr>
</table>
</div><br>
</div>
</div>
</div>
<div class="full" *ngIf="mtc">
<div id="wrapper">
<div class="user-table" id="first">
<p>USER STORIES</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="UserStorySource">
<th mat-header-cell *matHeaderCellDef>User Story Source</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStorySource</button> </td>
</ng-container>
<ng-container matColumnDef="UserStoryId">
<th mat-header-cell *matHeaderCellDef>User Story Id</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStoryId</button>
</td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Title </button></td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> <button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Description</button> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsUS"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsUS;"></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>TASKS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceT">
<ng-container matColumnDef="TaskSource">
<th mat-header-cell *matHeaderCellDef>Task Source</th>
<td mat-cell *matCellDef="let element">element.TaskSource </td>
</ng-container>
<ng-container matColumnDef="TaskCaseId">
<th mat-header-cell *matHeaderCellDef>Task Id</th>
<td mat-cell *matCellDef="let element"> element.TaskCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsT"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsT;"></tr>
</table>
</div><br>
</div>
</div>
<div id="wrapper">
<br>
</div>
<div id="wrapper">
<div class="user-table" id="first">
<p>TEST CASE</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceTC">
<ng-container matColumnDef="TestCaseSource">
<th mat-header-cell *matHeaderCellDef>Test Case Source</th>
<td mat-cell *matCellDef="let element">element.TestCaseSource </td>
</ng-container>
<ng-container matColumnDef="TestCaseId">
<th mat-header-cell *matHeaderCellDef>Test Case Id</th>
<td mat-cell *matCellDef="let element"> element.TestCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsTC"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsTC;"></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>BUGS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceB">
<ng-container matColumnDef="BugsSource">
<th mat-header-cell *matHeaderCellDef>Bugs Source</th>
<td mat-cell *matCellDef="let element">element.BugsSource </td>
</ng-container>
<ng-container matColumnDef="BugsCaseId">
<th mat-header-cell *matHeaderCellDef>Bugs ID</th>
<td mat-cell *matCellDef="let element"> element.BugsCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsB"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsB;"></tr>
</table>
</div><br>
</div>
</div>
</div>
This is Typescript file
export class MappingComponent implements OnInit
us: any[];
tc: any[];
mtc: any;
mb: any;
mt: any;
constructor(private data: LoginService)
displayedColumnsUS = [
'UserStorySource',
'UserStoryId',
'Title',
'Description'
];
dataSourceUS = new MatTableDataSource([]);
displayedColumnsT: string[] = [
'TaskSource',
'TaskCaseId',
'Title',
'Description'
];
dataSourceT = new MatTableDataSource([]);
displayedColumnsTC: string[] = [
'TestCaseSource',
'TestCaseId',
'Title',
'Description'
];
dataSourceTC = new MatTableDataSource([]);
displayedColumnsB: string[] = [
'BugsSource',
'BugsCaseId',
'Title',
'Description'
];
dataSourceB = new MatTableDataSource([]);
ngOnInit()
this.data.getmapping().subscribe(
data =>
this.us = data['UserStories'];
this.dataSourceUS = new MatTableDataSource(this.us);
)
updateTC(MappedTestCase: any, MappedBugs: any, MappedTask: any,UserStories:any)
this.mtc=MappedTestCase;
this.dataSourceTC = new MatTableDataSource(this.mtc);
this.mb=MappedBugs;
this.dataSourceB = new MatTableDataSource(this.mb);
this.mt=MappedTask;
this.dataSourceT = new MatTableDataSource(this.mt);
JSON structure
"UserStories": [
"UserStorySource": "TFS",
"UserStoryId": 1,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 1,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 2,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 1,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 2,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 1,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 2,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 2,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 2,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 3,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 2,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 3,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 2,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 3,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 3,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 3,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 4,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 3,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 4,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 3,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 4,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 4,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 4,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 5,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 4,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 5,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 4,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 5,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 5,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 5,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 6,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 5,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 6,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 5,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 6,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 6,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 6,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 7,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 6,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 7,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 6,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 7,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 7,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 7,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 8,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 7,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 8,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 7,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 8,
"Title": "T",
"Description": "T"
]
]
html
angular typescript two-way-binding mat-table asked Mar 22 at 9:41
Bhanu Prakash WarBhanu Prakash War
35
add a comment |
-1
There are four tables here and all are linked to each other. If you select any cell in the first table then the details which are mapped to that selected cell only be displayed in remaining tables.This is done by me but i want to get the same in two way like if you select the cell in 2,3 or 4th table the details mapped to that must display.[enter image description here][1]
IF you feel to change the format of json is also fine.
<div class="full" *ngIf="!mtc">
<div id="wrapper">
<div class="user-table" id="first">
<p>USER STORIES</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="UserStorySource">
<th mat-header-cell *matHeaderCellDef>User Story Source</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStorySource</button></td>
</ng-container>
<ng-container matColumnDef="UserStoryId">
<th mat-header-cell *matHeaderCellDef>User Story Id</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStoryId</button>
</td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Title</button></td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Description</button></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsUS"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsUS;" ></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>TASKS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="TaskSource">
<th mat-header-cell *matHeaderCellDef>Task Source</th>
<td mat-cell *matCellDef="let element">
element.MappedTask[0].TaskSource</td>
</ng-container>
<ng-container matColumnDef="TaskCaseId">
<th mat-header-cell *matHeaderCellDef>Task Id</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask,element.UserStories)"> element.MappedTask[0].TaskCaseId</button> </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask,element.UserStories)"> element.MappedTask[0].Title </button></td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask,element.UserStories)"> element.MappedTask[0].Description</button> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsT"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsT;"></tr>
</table>
</div><br>
</div>
</div>
<div id="wrapper">
<br>
</div>
<div id="wrapper">
<div class="user-table" id="first">
<p>TEST CASE</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="TestCaseSource">
<th mat-header-cell *matHeaderCellDef>Test Case Source</th>
<td mat-cell *matCellDef="let element">element.MappedTestCase[0].TestCaseSource </td>
</ng-container>
<ng-container matColumnDef="TestCaseId">
<th mat-header-cell *matHeaderCellDef>Test Case Id</th>
<td mat-cell *matCellDef="let element"> element.MappedTestCase[0].TestCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.MappedTestCase[0].Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.MappedTestCase[0].Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsTC"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsTC;"></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>BUGS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="BugsSource">
<th mat-header-cell *matHeaderCellDef>Bugs Source</th>
<td mat-cell *matCellDef="let element">element.MappedBugs[0].BugsSource </td>
</ng-container>
<ng-container matColumnDef="BugsCaseId">
<th mat-header-cell *matHeaderCellDef>Bugs ID</th>
<td mat-cell *matCellDef="let element"> element.MappedBugs[0].BugsCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.MappedBugs[0].Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.MappedBugs[0].Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsB"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsB;"></tr>
</table>
</div><br>
</div>
</div>
</div>
<div class="full" *ngIf="mtc">
<div id="wrapper">
<div class="user-table" id="first">
<p>USER STORIES</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="UserStorySource">
<th mat-header-cell *matHeaderCellDef>User Story Source</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStorySource</button> </td>
</ng-container>
<ng-container matColumnDef="UserStoryId">
<th mat-header-cell *matHeaderCellDef>User Story Id</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStoryId</button>
</td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Title </button></td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> <button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Description</button> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsUS"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsUS;"></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>TASKS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceT">
<ng-container matColumnDef="TaskSource">
<th mat-header-cell *matHeaderCellDef>Task Source</th>
<td mat-cell *matCellDef="let element">element.TaskSource </td>
</ng-container>
<ng-container matColumnDef="TaskCaseId">
<th mat-header-cell *matHeaderCellDef>Task Id</th>
<td mat-cell *matCellDef="let element"> element.TaskCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsT"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsT;"></tr>
</table>
</div><br>
</div>
</div>
<div id="wrapper">
<br>
</div>
<div id="wrapper">
<div class="user-table" id="first">
<p>TEST CASE</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceTC">
<ng-container matColumnDef="TestCaseSource">
<th mat-header-cell *matHeaderCellDef>Test Case Source</th>
<td mat-cell *matCellDef="let element">element.TestCaseSource </td>
</ng-container>
<ng-container matColumnDef="TestCaseId">
<th mat-header-cell *matHeaderCellDef>Test Case Id</th>
<td mat-cell *matCellDef="let element"> element.TestCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsTC"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsTC;"></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>BUGS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceB">
<ng-container matColumnDef="BugsSource">
<th mat-header-cell *matHeaderCellDef>Bugs Source</th>
<td mat-cell *matCellDef="let element">element.BugsSource </td>
</ng-container>
<ng-container matColumnDef="BugsCaseId">
<th mat-header-cell *matHeaderCellDef>Bugs ID</th>
<td mat-cell *matCellDef="let element"> element.BugsCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsB"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsB;"></tr>
</table>
</div><br>
</div>
</div>
</div>
This is Typescript file
export class MappingComponent implements OnInit
us: any[];
tc: any[];
mtc: any;
mb: any;
mt: any;
constructor(private data: LoginService)
displayedColumnsUS = [
'UserStorySource',
'UserStoryId',
'Title',
'Description'
];
dataSourceUS = new MatTableDataSource([]);
displayedColumnsT: string[] = [
'TaskSource',
'TaskCaseId',
'Title',
'Description'
];
dataSourceT = new MatTableDataSource([]);
displayedColumnsTC: string[] = [
'TestCaseSource',
'TestCaseId',
'Title',
'Description'
];
dataSourceTC = new MatTableDataSource([]);
displayedColumnsB: string[] = [
'BugsSource',
'BugsCaseId',
'Title',
'Description'
];
dataSourceB = new MatTableDataSource([]);
ngOnInit()
this.data.getmapping().subscribe(
data =>
this.us = data['UserStories'];
this.dataSourceUS = new MatTableDataSource(this.us);
)
updateTC(MappedTestCase: any, MappedBugs: any, MappedTask: any,UserStories:any)
this.mtc=MappedTestCase;
this.dataSourceTC = new MatTableDataSource(this.mtc);
this.mb=MappedBugs;
this.dataSourceB = new MatTableDataSource(this.mb);
this.mt=MappedTask;
this.dataSourceT = new MatTableDataSource(this.mt);
JSON structure
"UserStories": [
"UserStorySource": "TFS",
"UserStoryId": 1,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 1,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 2,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 1,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 2,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 1,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 2,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 2,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 2,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 3,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 2,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 3,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 2,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 3,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 3,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 3,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 4,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 3,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 4,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 3,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 4,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 4,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 4,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 5,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 4,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 5,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 4,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 5,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 5,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 5,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 6,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 5,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 6,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 5,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 6,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 6,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 6,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 7,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 6,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 7,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 6,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 7,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 7,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 7,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 8,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 7,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 8,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 7,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 8,
"Title": "T",
"Description": "T"
]
]
html
angular typescript two-way-binding mat-table asked Mar 22 at 9:41
Bhanu Prakash WarBhanu Prakash War
35
add a comment |
-1
-1
-1
1
There are four tables here and all are linked to each other. If you select any cell in the first table then the details which are mapped to that selected cell only be displayed in remaining tables.This is done by me but i want to get the same in two way like if you select the cell in 2,3 or 4th table the details mapped to that must display.[enter image description here][1]
IF you feel to change the format of json is also fine.
<div class="full" *ngIf="!mtc">
<div id="wrapper">
<div class="user-table" id="first">
<p>USER STORIES</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="UserStorySource">
<th mat-header-cell *matHeaderCellDef>User Story Source</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStorySource</button></td>
</ng-container>
<ng-container matColumnDef="UserStoryId">
<th mat-header-cell *matHeaderCellDef>User Story Id</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStoryId</button>
</td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Title</button></td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Description</button></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsUS"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsUS;" ></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>TASKS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="TaskSource">
<th mat-header-cell *matHeaderCellDef>Task Source</th>
<td mat-cell *matCellDef="let element">
element.MappedTask[0].TaskSource</td>
</ng-container>
<ng-container matColumnDef="TaskCaseId">
<th mat-header-cell *matHeaderCellDef>Task Id</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask,element.UserStories)"> element.MappedTask[0].TaskCaseId</button> </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask,element.UserStories)"> element.MappedTask[0].Title </button></td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask,element.UserStories)"> element.MappedTask[0].Description</button> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsT"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsT;"></tr>
</table>
</div><br>
</div>
</div>
<div id="wrapper">
<br>
</div>
<div id="wrapper">
<div class="user-table" id="first">
<p>TEST CASE</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="TestCaseSource">
<th mat-header-cell *matHeaderCellDef>Test Case Source</th>
<td mat-cell *matCellDef="let element">element.MappedTestCase[0].TestCaseSource </td>
</ng-container>
<ng-container matColumnDef="TestCaseId">
<th mat-header-cell *matHeaderCellDef>Test Case Id</th>
<td mat-cell *matCellDef="let element"> element.MappedTestCase[0].TestCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.MappedTestCase[0].Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.MappedTestCase[0].Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsTC"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsTC;"></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>BUGS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="BugsSource">
<th mat-header-cell *matHeaderCellDef>Bugs Source</th>
<td mat-cell *matCellDef="let element">element.MappedBugs[0].BugsSource </td>
</ng-container>
<ng-container matColumnDef="BugsCaseId">
<th mat-header-cell *matHeaderCellDef>Bugs ID</th>
<td mat-cell *matCellDef="let element"> element.MappedBugs[0].BugsCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.MappedBugs[0].Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.MappedBugs[0].Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsB"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsB;"></tr>
</table>
</div><br>
</div>
</div>
</div>
<div class="full" *ngIf="mtc">
<div id="wrapper">
<div class="user-table" id="first">
<p>USER STORIES</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="UserStorySource">
<th mat-header-cell *matHeaderCellDef>User Story Source</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStorySource</button> </td>
</ng-container>
<ng-container matColumnDef="UserStoryId">
<th mat-header-cell *matHeaderCellDef>User Story Id</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStoryId</button>
</td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Title </button></td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> <button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Description</button> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsUS"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsUS;"></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>TASKS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceT">
<ng-container matColumnDef="TaskSource">
<th mat-header-cell *matHeaderCellDef>Task Source</th>
<td mat-cell *matCellDef="let element">element.TaskSource </td>
</ng-container>
<ng-container matColumnDef="TaskCaseId">
<th mat-header-cell *matHeaderCellDef>Task Id</th>
<td mat-cell *matCellDef="let element"> element.TaskCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsT"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsT;"></tr>
</table>
</div><br>
</div>
</div>
<div id="wrapper">
<br>
</div>
<div id="wrapper">
<div class="user-table" id="first">
<p>TEST CASE</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceTC">
<ng-container matColumnDef="TestCaseSource">
<th mat-header-cell *matHeaderCellDef>Test Case Source</th>
<td mat-cell *matCellDef="let element">element.TestCaseSource </td>
</ng-container>
<ng-container matColumnDef="TestCaseId">
<th mat-header-cell *matHeaderCellDef>Test Case Id</th>
<td mat-cell *matCellDef="let element"> element.TestCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsTC"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsTC;"></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>BUGS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceB">
<ng-container matColumnDef="BugsSource">
<th mat-header-cell *matHeaderCellDef>Bugs Source</th>
<td mat-cell *matCellDef="let element">element.BugsSource </td>
</ng-container>
<ng-container matColumnDef="BugsCaseId">
<th mat-header-cell *matHeaderCellDef>Bugs ID</th>
<td mat-cell *matCellDef="let element"> element.BugsCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsB"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsB;"></tr>
</table>
</div><br>
</div>
</div>
</div>
This is Typescript file
export class MappingComponent implements OnInit
us: any[];
tc: any[];
mtc: any;
mb: any;
mt: any;
constructor(private data: LoginService)
displayedColumnsUS = [
'UserStorySource',
'UserStoryId',
'Title',
'Description'
];
dataSourceUS = new MatTableDataSource([]);
displayedColumnsT: string[] = [
'TaskSource',
'TaskCaseId',
'Title',
'Description'
];
dataSourceT = new MatTableDataSource([]);
displayedColumnsTC: string[] = [
'TestCaseSource',
'TestCaseId',
'Title',
'Description'
];
dataSourceTC = new MatTableDataSource([]);
displayedColumnsB: string[] = [
'BugsSource',
'BugsCaseId',
'Title',
'Description'
];
dataSourceB = new MatTableDataSource([]);
ngOnInit()
this.data.getmapping().subscribe(
data =>
this.us = data['UserStories'];
this.dataSourceUS = new MatTableDataSource(this.us);
)
updateTC(MappedTestCase: any, MappedBugs: any, MappedTask: any,UserStories:any)
this.mtc=MappedTestCase;
this.dataSourceTC = new MatTableDataSource(this.mtc);
this.mb=MappedBugs;
this.dataSourceB = new MatTableDataSource(this.mb);
this.mt=MappedTask;
this.dataSourceT = new MatTableDataSource(this.mt);
JSON structure
"UserStories": [
"UserStorySource": "TFS",
"UserStoryId": 1,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 1,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 2,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 1,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 2,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 1,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 2,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 2,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 2,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 3,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 2,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 3,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 2,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 3,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 3,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 3,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 4,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 3,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 4,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 3,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 4,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 4,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 4,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 5,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 4,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 5,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 4,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 5,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 5,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 5,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 6,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 5,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 6,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 5,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 6,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 6,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 6,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 7,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 6,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 7,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 6,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 7,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 7,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 7,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 8,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 7,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 8,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 7,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 8,
"Title": "T",
"Description": "T"
]
]
html
angular typescript two-way-binding mat-table asked Mar 22 at 9:41
Bhanu Prakash WarBhanu Prakash War
35
There are four tables here and all are linked to each other. If you select any cell in the first table then the details which are mapped to that selected cell only be displayed in remaining tables.This is done by me but i want to get the same in two way like if you select the cell in 2,3 or 4th table the details mapped to that must display.[enter image description here][1]
IF you feel to change the format of json is also fine.
<div class="full" *ngIf="!mtc">
<div id="wrapper">
<div class="user-table" id="first">
<p>USER STORIES</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="UserStorySource">
<th mat-header-cell *matHeaderCellDef>User Story Source</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStorySource</button></td>
</ng-container>
<ng-container matColumnDef="UserStoryId">
<th mat-header-cell *matHeaderCellDef>User Story Id</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStoryId</button>
</td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Title</button></td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Description</button></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsUS"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsUS;" ></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>TASKS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="TaskSource">
<th mat-header-cell *matHeaderCellDef>Task Source</th>
<td mat-cell *matCellDef="let element">
element.MappedTask[0].TaskSource</td>
</ng-container>
<ng-container matColumnDef="TaskCaseId">
<th mat-header-cell *matHeaderCellDef>Task Id</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask,element.UserStories)"> element.MappedTask[0].TaskCaseId</button> </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask,element.UserStories)"> element.MappedTask[0].Title </button></td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask,element.UserStories)"> element.MappedTask[0].Description</button> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsT"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsT;"></tr>
</table>
</div><br>
</div>
</div>
<div id="wrapper">
<br>
</div>
<div id="wrapper">
<div class="user-table" id="first">
<p>TEST CASE</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="TestCaseSource">
<th mat-header-cell *matHeaderCellDef>Test Case Source</th>
<td mat-cell *matCellDef="let element">element.MappedTestCase[0].TestCaseSource </td>
</ng-container>
<ng-container matColumnDef="TestCaseId">
<th mat-header-cell *matHeaderCellDef>Test Case Id</th>
<td mat-cell *matCellDef="let element"> element.MappedTestCase[0].TestCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.MappedTestCase[0].Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.MappedTestCase[0].Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsTC"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsTC;"></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>BUGS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="BugsSource">
<th mat-header-cell *matHeaderCellDef>Bugs Source</th>
<td mat-cell *matCellDef="let element">element.MappedBugs[0].BugsSource </td>
</ng-container>
<ng-container matColumnDef="BugsCaseId">
<th mat-header-cell *matHeaderCellDef>Bugs ID</th>
<td mat-cell *matCellDef="let element"> element.MappedBugs[0].BugsCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.MappedBugs[0].Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.MappedBugs[0].Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsB"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsB;"></tr>
</table>
</div><br>
</div>
</div>
</div>
<div class="full" *ngIf="mtc">
<div id="wrapper">
<div class="user-table" id="first">
<p>USER STORIES</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceUS">
<ng-container matColumnDef="UserStorySource">
<th mat-header-cell *matHeaderCellDef>User Story Source</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStorySource</button> </td>
</ng-container>
<ng-container matColumnDef="UserStoryId">
<th mat-header-cell *matHeaderCellDef>User Story Id</th>
<td mat-cell *matCellDef="let element">
<button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.UserStoryId</button>
</td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Title </button></td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> <button mat-button (click)="updateTC(element.MappedTestCase, element.MappedBugs, element.MappedTask)">element.Description</button> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsUS"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsUS;"></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>TASKS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceT">
<ng-container matColumnDef="TaskSource">
<th mat-header-cell *matHeaderCellDef>Task Source</th>
<td mat-cell *matCellDef="let element">element.TaskSource </td>
</ng-container>
<ng-container matColumnDef="TaskCaseId">
<th mat-header-cell *matHeaderCellDef>Task Id</th>
<td mat-cell *matCellDef="let element"> element.TaskCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsT"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsT;"></tr>
</table>
</div><br>
</div>
</div>
<div id="wrapper">
<br>
</div>
<div id="wrapper">
<div class="user-table" id="first">
<p>TEST CASE</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceTC">
<ng-container matColumnDef="TestCaseSource">
<th mat-header-cell *matHeaderCellDef>Test Case Source</th>
<td mat-cell *matCellDef="let element">element.TestCaseSource </td>
</ng-container>
<ng-container matColumnDef="TestCaseId">
<th mat-header-cell *matHeaderCellDef>Test Case Id</th>
<td mat-cell *matCellDef="let element"> element.TestCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsTC"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsTC;"></tr>
</table>
</div><br>
</div>
<div class="user-table" id="first">
<p>BUGS</p>
<br>
<div class="example-container ">
<table mat-table [dataSource]="dataSourceB">
<ng-container matColumnDef="BugsSource">
<th mat-header-cell *matHeaderCellDef>Bugs Source</th>
<td mat-cell *matCellDef="let element">element.BugsSource </td>
</ng-container>
<ng-container matColumnDef="BugsCaseId">
<th mat-header-cell *matHeaderCellDef>Bugs ID</th>
<td mat-cell *matCellDef="let element"> element.BugsCaseId </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element"> element.Title </td>
</ng-container>
<ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element"> element.Description </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsB"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsB;"></tr>
</table>
</div><br>
</div>
</div>
</div>
This is Typescript file
export class MappingComponent implements OnInit
us: any[];
tc: any[];
mtc: any;
mb: any;
mt: any;
constructor(private data: LoginService)
displayedColumnsUS = [
'UserStorySource',
'UserStoryId',
'Title',
'Description'
];
dataSourceUS = new MatTableDataSource([]);
displayedColumnsT: string[] = [
'TaskSource',
'TaskCaseId',
'Title',
'Description'
];
dataSourceT = new MatTableDataSource([]);
displayedColumnsTC: string[] = [
'TestCaseSource',
'TestCaseId',
'Title',
'Description'
];
dataSourceTC = new MatTableDataSource([]);
displayedColumnsB: string[] = [
'BugsSource',
'BugsCaseId',
'Title',
'Description'
];
dataSourceB = new MatTableDataSource([]);
ngOnInit()
this.data.getmapping().subscribe(
data =>
this.us = data['UserStories'];
this.dataSourceUS = new MatTableDataSource(this.us);
)
updateTC(MappedTestCase: any, MappedBugs: any, MappedTask: any,UserStories:any)
this.mtc=MappedTestCase;
this.dataSourceTC = new MatTableDataSource(this.mtc);
this.mb=MappedBugs;
this.dataSourceB = new MatTableDataSource(this.mb);
this.mt=MappedTask;
this.dataSourceT = new MatTableDataSource(this.mt);
JSON structure
"UserStories": [
"UserStorySource": "TFS",
"UserStoryId": 1,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 1,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 2,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 1,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 2,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 1,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 2,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 2,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 2,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 3,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 2,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 3,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 2,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 3,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 3,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 3,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 4,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 3,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 4,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 3,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 4,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 4,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 4,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 5,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 4,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 5,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 4,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 5,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 5,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 5,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 6,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 5,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 6,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 5,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 6,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 6,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 6,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 7,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 6,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 7,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 6,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 7,
"Title": "T",
"Description": "T"
]
,
"UserStorySource": "TFS",
"UserStoryId": 7,
"Title": "US",
"Description": "US",
"MappedTestCase": [
"TestCaseSource": "TFS",
"TestCaseId": 7,
"Title": "TC",
"Description": "TC"
,
"TestCaseSource": "TFS",
"TestCaseId": 8,
"Title": "TC",
"Description": "TC"
],
"MappedBugs": [
"BugsSource": "TFS",
"BugsCaseId": 7,
"Title": "B",
"Description": "B"
,
"BugsSource": "TFS",
"BugsCaseId": 8,
"Title": "B",
"Description": "B"
],
"MappedTask": [
"TaskSource": "TFS",
"TaskCaseId": 7,
"Title": "T",
"Description": "T"
,
"TaskSource": "TFS",
"TaskCaseId": 8,
"Title": "T",
"Description": "T"
]
]
html
angular typescript two-way-binding mat-table html
angular typescript two-way-binding mat-table asked Mar 22 at 9:41
Bhanu Prakash WarBhanu Prakash War
35
asked Mar 22 at 9:41
Bhanu Prakash WarBhanu Prakash War
35
asked Mar 22 at 9:41
Bhanu Prakash WarBhanu Prakash War
35
asked Mar 22 at 9:41
Bhanu Prakash WarBhanu Prakash War
35
asked Mar 22 at 9:41
Bhanu Prakash WarBhanu Prakash War
35
35
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55296753%2ftwo-way-selection-binding-in-angular%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55296753%2ftwo-way-selection-binding-in-angular%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
