twitter-bootstrap 如何在Angular 5中选择一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49666598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select a row in Angular 5
提问by billy_56
I'm verrryyyyy new to Angular, so please understand me :)
我是 Angular 的新手，所以请理解我:)
I have a list of users, that are displayed like this:
我有一个用户列表，显示如下：
Here is my HTML:
这是我的 HTML：
EDIT - ADDED CRUD BUTTONS :
编辑 - 添加 CRUD 按钮：
<!--Add new button-->
<button type="button" (click)="AddModal.show()">
</button>
<button type="button" (click)="EditModal.show()">
</button>
<button type="button" (click)="DeleteModal.show()">
</button>
</div>
<!--Data Tableq which displays users info-->
<div class="dash-table-container">
<table class="table table-hover">
<thead>
<tr>
<th>
Name
<i class="fas fa-sort-amount-down sorting-icon"></i>
<i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
<i class="fas fa-sort sorting-icon" style="display: none;"></i>
</th>
<th>
Position
<i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
<i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
<i class="fas fa-sort sorting-icon-default"></i>
</th>
<th>
Office
<i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
<i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
<i class="fas fa-sort sorting-icon-default"></i>
</th>
<th>
Age
<i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
<i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
<i class="fas fa-sort sorting-icon-default"></i>
</th>
<th>
Salary
<i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
<i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
<i class="fas fa-sort sorting-icon-default"></i>
</th>
</thead>
<!--<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>-->
<tbody>
<tr *ngFor="let u of users; let i=index;">
<td>{{u.Name}}</td>
<td>{{u.Position}}</td>
<td>{{u.Office}}</td>
<td>{{u.Age}}</td>
<td>{{u.StartDate}}</td>
<td>{{u.Salary}}</td>
</tr>
</tbody>
</table>
</div>
<app-product-new #AddModal></app-group-new>
<app-product-edit #EditModal></app-group-edit>
<product-dialog #DeleteModal></touch-dialog>
I'm wondering how could I select a row from this table using angular? I need that because I want to send that selected row's data to a modal for editing..
我想知道如何使用 angular 从此表中选择一行？我需要它，因为我想将该选定行的数据发送到模态进行编辑..
EDIT:
编辑：
So basically, when I select a row and when I click on a EDIT modal I would like to know which row is selected so I can populate modal's data with that informations and save/edit it..
所以基本上，当我选择一行并单击编辑模式时，我想知道选择了哪一行，以便我可以使用该信息填充模式数据并保存/编辑它..
Thanks
谢谢
Thanks guys! Cheers
多谢你们！干杯
回答by Dheeraj Kumar
Assuming you want that for edit or something , I have added below a button with each row on click of which you will get complete row.
假设您想要编辑或其他内容，我在每行下方添加了一个按钮，单击该按钮您将获得完整的行。
<tbody>
<tr *ngFor="let u of users; let i=index;">
<td>{{u.Name}}</td>
<td>{{u.Position}}</td>
<td>{{u.Office}}</td>
<td>{{u.Age}}</td>
<td>{{u.StartDate}}</td>
<td>{{u.Salary}}</td>
<td> <input type="button" value="Edit" (click)="RowSelected(u)"/></td>
</tr>
</tbody>
RowSelected(u:any){
console.log(u);
}
Update:
更新：
If you dont want button on each row and get data of selected row by just clicking on row, below is the code.
如果您不想在每一行上添加按钮并通过单击行来获取所选行的数据，下面是代码。
<tbody>
<tr *ngFor="let u of users; let i=index;" (click)="RowSelected(u);">
<td>{{u.Name}}</td>
<td>{{u.Position}}</td>
<td>{{u.Office}}</td>
<td>{{u.Age}}</td>
<td>{{u.StartDate}}</td>
<td>{{u.Salary}}</td>
</td>
</tr>
</tbody>
For Edit in Question:
对于有问题的编辑：
After above code in html, in your component.
在 html 中的上述代码之后，在您的组件中。
RowSelected(u:any){
this.selectedUser=u; // declare variable in component.
}
Again in your modal.
再次在您的模态中。
<modal>
<input type="text" [(ngModel)]="selectedUser.Name" />
<input type="text" ([ngModel)]="selectedUser.Position" />
...
...
</modal>
回答by Karthikeyan m
You can try this following source code
**app.component.ts**
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
users = [
{Name: 'karthi', Position: 'Developer', Office: 'a2z', Age: 29, StartDate: '11Nov2018', Salary: 2000, flag: false},
{Name: 'arun', Position: 'Tester', Office: 'a2z', Age: 29, StartDate: '11Nov2018', Salary: 5000, flag: false},
{Name: 'mani', Position: 'Software analyst', Office: 'a2z', Age: 29, StartDate: '11Nov2018', Salary: 6000, flag: false},
{Name: 'viay', Position: 'Developer', Office: 'a2z', Age: 29, StartDate: '11Nov2018', Salary: 21000, flag: false},
];
public selectUsers(event: any, user: any) {
user.flag = !user.flag;
}
}
**app.component.html**
<!--Data Tableq which displays users info-->
<div class="dash-table-container">
<table class="table table-hover">
<thead>
<tr>
<th>
Name
<i class="fas fa-sort-amount-down sorting-icon"></i>
<i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
<i class="fas fa-sort sorting-icon" style="display: none;"></i>
</th>
<th>
Position
<i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
<i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
<i class="fas fa-sort sorting-icon-default"></i>
</th>
<th>
Office
<i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
<i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
<i class="fas fa-sort sorting-icon-default"></i>
</th>
<th>
Age
<i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
<i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
<i class="fas fa-sort sorting-icon-default"></i>
</th>
<th>
Salary
<i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
<i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
<i class="fas fa-sort sorting-icon-default"></i>
</th>
</thead>
<!--<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>-->
<tbody>
<tr *ngFor="let u of users; let i=index;" (click)="selectUsers($event, u);" [class.selected]="u.flag === true">
<td>{{u.Name}}</td>
<td>{{u.Position}}</td>
<td>{{u.Office}}</td>
<td>{{u.Age}}</td>
<td>{{u.StartDate}}</td>
<td>{{u.Salary}}</td>
</tr>
</tbody>
</table>
</div>
**app.component.css**
.selected{background-color:#B0BED9}
