为什么我不能从打字稿中的方法动态设置样式

Question

我正在尝试使用.ts文件中的方法设置表中行的样式，但出现以下错误：

> IndexComponent.html:16 ERROR Error: Cannot find a differ supporting
> object 'cursor:pointer'
>     at KeyValueDiffers.push../node_modules/@angular/core/fesm5/core.js.KeyValueDiffers.find
> (core.js:16533)
>     at NgStyle.set [as ngStyle] (common.js:3816)
>     at updateProp (core.js:18743)
>     at checkAndUpdateDirectiveInline (core.js:18494)
>     at checkAndUpdateNodeInline (core.js:19801)
>     at checkAndUpdateNode (core.js:19763)
>     at debugCheckAndUpdateNode (core.js:20397)
>     at debugCheckDirectivesFn (core.js:20357)
>     at Object.eval [as updateDirectives] (IndexComponent.html:16)
>     at Object.debugUpdateDirectives [as updateDirectives] (core.js:20349)

.HTML

<table class="table">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr [ngStyle]="setStyle(item)" (mousedown)="onSelectionChanged(item)" *ngFor="let item of viewComputers">
<td>{{item.id}}</td>
<td>{{item.username}}</td>
</tr>
</table>

TS

export class IndexComponent implements OnInit {
public viewComputers:Computer[]=null;
protected SelectedComputer:Computer=null;
onSelectionChanged(data:Computer){
this.SelectedComputer=data;
}
public setStyle(value:Computer):string{
var style="cursor:pointer";
if(this.SelectedComputer==null ||!(this.SelectedComputer.id==value.id) ){
console.log(style);
return style;
}
return style+";background-color: #6699ff";
}
}

如您所见，表格上是否没有选择(没有在此处放置逻辑(，或者如果未选择当前行，我想设置样式，否则我想要特定的选择。

Answer 1

ngStyle 需要对象，但不需要字符串 https://angular.io/api/common/NgStyle

@Input()
ngStyle: { [klass: string]: any; }

代码更改

public setStyle(value:Computer):any{
let style: any ={'cursor': 'pointer'};
if(this.SelectedComputer==null ||!(this.SelectedComputer.id==value.id) ){
console.log(style);
return style;
}
return {...style, 'background-color' : '#6699ff' };
}