[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}; } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |