在ListView和RadListView模板中使用NgClass和三元表达式



使用[ngClass]和三元表达式,与使用*ngIf一样,会影响ListView和RadListView中元素的回收过程吗
假设我有一个Label,它有时应该显示红色的"缺失"文本,有时只显示黑色的其他文本
在NativeScript中显示这一点的最有效方法是什么

选项#1:

  1. 使用布尔标志从后端获取一些数据,建议某些元素应该有红色的"missing">
  2. 在HTML中的模板内,用布尔值调节文本颜色css类
  3. 在HTML中,用一个三元表达式条件化单词"missing">

示例:
<Label [text]="!item.isMissing ? item.title : 'missing'" [ngClass]="{'missing-text': item.isMissing, 'regular-text': !item.isMissing}"></Label>

选项#2:

  1. 使用布尔标志从后端获取一些数据,建议某些元素应该有红色的"missing">
  2. 使用模板选择器并创建一个具有红色"缺失"文本的模板(标记为a)
  3. 为定期显示的所有其他元素创建不同的模板(标记为B)

模板A中标签的示例:
<Label text="missing" class="missing-text"></Label>
和模板B中标签的例子:
<Label [text]="item.title" class="regular-text"></Label>

选项#1有效,但选项#2相对更高效,因为它不必在回收时更新样式。

最新更新