在HTML和Angular dart中，是否有一种方法可以基于函数更改元素的样式？

问题描述

我在用角镖。我有一个简单的对话框，其中包含一个列表。我希望列表中的所选项目是不同的突出显示颜色。我已经在工作，但是必须有比我正在做的更好的方法。

在我的HTML代码中，列表中有2个不同的元素，并且我基于某种逻辑（rowIsSelected函数）显示一个或另一个。有没有办法只有一个元素并根据相同的功能更改其样式？

<modal *ngIf="visible" [visible]="visible">
    <material-dialog headered class="headered-dialog">
        <div header>
            <h1>{{caption}}</h1>
        </div>
        <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
            <div class="list-body form-control">
                <ul #listcontrol>
                    <li *ngFor="let item of items; let i=index" (dblclick)="onListDblClick(i)" (click)="onListClick(i)">
                        <div class="selectedrow" *ngIf="rowIsSelected(i)">{{item.name}}</div>
                        <div *ngIf="!rowIsSelected(i)">{{item.name}}</div>
                    </li>
                </ul>
            </div>
        </form>
        <p></p>
        <div footer>
            <button (click)="onSubmit()" type="submit" class="btn btn-primary closebuttons">OK</button>
            <button (click)="onClose()" type="button" class="btn closebuttons">Cancel</button>
        </div>
    </material-dialog>
</modal>

我的CSS看起来像这样...

p { 
  margin: 8px; 
}

.list-body{
    width: 300px;
    max-height: 500px;
    overflow-y:auto; 
    overflow-x:auto;
    border: 1px solid black;   
}
 
ul {
  list-style: none;
  padding-left: 0;
}

li {
  line-height: 2em;
  cursor: pointer;
}

li:hover {
  background-color: #EEEEEE;
}

.selectedrow {
  background-color: #0072a3;
  color: white;
}

.closebuttons {
  width:100px;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular-dart html