加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

[Angular] ngClass conditional

发布时间:2020-12-17 07:03:24 所属栏目:安全 来源:网络整理
导读:Using ngClass for conditional styling,here is the usage from the docs: /* * * @ngModule CommonModule * * @usageNotes * ``` * some-element [ngClass]="‘first second‘".../some-element * * some-element [ngClass]="[‘first‘,‘second‘]".../s

Using ngClass for conditional styling,here is the usage from the docs:

/**
 * @ngModule CommonModule
 *
 * @usageNotes
 * ```
 *     <some-element [ngClass]="‘first second‘">...</some-element>
 *
 *     <some-element [ngClass]="[‘first‘,‘second‘]">...</some-element>
 *
 *     <some-element [ngClass]="{‘first‘: true,‘second‘: true,‘third‘: false}">...</some-element>
 *
 *     <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
 *
 *     <some-element [ngClass]="{‘class1 class2 class3‘ : true}">...</some-element>
 * ```
 *
 * @description
 *
 * Adds and removes CSS classes on an HTML element.
 *
 * The CSS classes are updated as follows,depending on the type of the expression evaluation:
 * - `string` - the CSS classes listed in the string (space delimited) are added,* - `Array` - the CSS classes declared as Array elements are added,* - `Object` - keys are CSS classes that get added when the expression given in the value
 *              evaluates to a truthy value,otherwise they are removed.
 *
 * @publicApi
 */

?

It is also recommended when the conditional logics is?complicated,we can using Function:

<div [ngClass]="getCondClass(i)" *ngFor="let item of items as collection; index as i; first as isFirst; last as isLast; even as isEven; odd as isOdd;">
  {{i + 1}}: {{item}} -- {{collection}}
</div>
  getCondClass (index) {
    if (index + 1 === 3) {
      // Using array to add ‘third‘,‘very*important‘ classes
      return [third,very-important];
    }

    if (index === this.items.length - 1) {
      // Using string to add class
      return last;
    }

    if (index === 0) {
      // Using object to add class
      return {first: true};
    }
  }

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读