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

时间:2019-01-05 09:09:47

标签: nativescript

在损害ListView和RadListView中元素的回收过程方面,是否使用[ngClass]和三元表达式与使用*ngIf相同? 假设我有一个Label,它有时应该显示红色的“缺失”文本,而有时只显示黑色的其他文本。
在NativeScript中显示此问题的最有效方法是什么?

选项1:

  1. 使用布尔标志从后端获取一些数据,建议 某些元素应该带有红色的“缺失”。
  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. 使用布尔标志从后端获取一些数据,建议 某些元素应该带有红色的“缺失”。
  2. 使用模板选择器并创建带有红色“缺失”文本的模板(标记为A)。
  3. 为定期显示的所有其他元素创建一个不同的模板(标记为B)。

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

1 个答案:

答案 0 :(得分:1)

选项#1可以使用,但是选项#2相对来说效率更高,因为在回收时不必更新样式。