Question

我想更改所选值的背景颜色。我已经使用ng class和ngmodel尝试了它，但是没有按照预期工作。以下是我的父ts文件。

users = USERS;
selectedUser = 0;
isSelected = false;

constructor() { }

ngOnInit() {
}

onSelect(index): void {
this.selectedUser = index;
console.log(this.selectedUser);
}
}

下面是我的父html文件。

<div class="row details-container">
<div class="col-md-4 col-sm-12">
<table class="table table-striped table-bordered table-hover">
  <tr *ngFor="let user of users; let i = index" (click)="onSelect(i)" [ngClass]="{select: isSelected}">
    <td>{{ user.name }}</td>
  </tr>
</table>
</div>
<div class="col-md-8 col-sm-12" >
<app-child-detail [(ngModel)]="isSelected" [users]="users[selectedUser]"> 
</app-child-detail>
</div>
</div>

在我的css文件中添加了以下内容：

 .select {
 background-color: black;
 }

以下是我的子组件html文件：

<table class="table table-striped table-bordered table-hover">
<tr>
<td><b>Id: </b>{{ users.id }}</td>
<td><b>Name:</b>{{ users.name }}</td>
<td><b>Location:</b>{{ users.location }}</td>
 </tr>
</table>

我只想将ngclass用于选定的值以更改其背景

Answer 1

尝试这样

 <tr *ngFor="let user of users; let i = index" (click)="onSelect(i)" 
      [class.selected]="i==selectedUser">
    <td>{{ user.name }}</td>

基本上，您需要将所选的行索引值与您在selecteduser方法中设置的onSelect值进行匹配

注意：您可以使用ngClass，但我要使用class.selected，因为该html元素上只有一个类。

Answer 2

isSelected没有正确的绑定。

这可能是您想要的：

<tr *ngFor="let user of users; let i = index" (click)="onSelect(i)"
  [ngClass]="{'select': selectedUser == i}">
...

Answer 3

正确的语法为-

[ngClass]="{'select': isSelected}"

Answer 4

您已调用onSelect方法将索引设置为selectedUser属性，但尚未将isSelected设置为true。

请如下更新onSelect方法-

onSelect(index): void {
this.selectedUser = index;
this.isSelected=true;
console.log(this.selectedUser);
}

Answer 5

您只是在使用 isSelected ，它并不指向数组中的任何特定项目。

您应该在[ngClass]="{ select: selectedUser === i }"中使用比较运算符，这里的i是项目的索引，当用户单击tr onSelect(i)时，会使用当前项目的数组。

因此，等于运算符将selectedUser与索引i进行比较，当匹配时，select类将仅添加到该特定项。

<tr *ngFor="let user of users; let i = index" (click)="onSelect(i)" [ngClass]="{select: selectedUser === i}">
....
</tr>

使用ngClass为背景色更改选择值

5 个答案: