iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(NgClass): throw a descriptive error when CSS class is not a string (#12662) 

Fixes #12586
This commit is contained in:
Pawel Kozlowski 2016-11-07 21:23:31 +01:00 committed by vikerman
parent 22c021c57f
commit f3793b5953
2 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
modules/@angular/common/src/directives/ng_class.ts
View File

@ -9,7 +9,7 @@
import {CollectionChangeRecord, Directive, DoCheck, ElementRef, Input, IterableDiffer, IterableDiffers, KeyValueChangeRecord, KeyValueDiffer, KeyValueDiffers, Renderer} from '@angular/core';
import {isListLikeIterable} from '../facade/collection';
import {isPresent} from '../facade/lang';
import {isPresent, stringify} from '../facade/lang';
/**
* @ngModule CommonModule
@ -108,8 +108,14 @@ export class NgClass implements DoCheck {
}
private _applyIterableChanges(changes: any): void {
changes.forEachAddedItem(
(record: CollectionChangeRecord) => this._toggleClass(record.item, true));
changes.forEachAddedItem((record: CollectionChangeRecord) => {
if (typeof record.item === 'string') {
this._toggleClass(record.item, true);
} else {
throw new Error(
`NgClass can only toggle CSS classes expressed as strings, got ${stringify(record.item)}`);
}
});
changes.forEachRemovedItem(
(record: CollectionChangeRecord) => this._toggleClass(record.item, false));

8
modules/@angular/common/test/directives/ng_class_spec.ts
View File

@ -8,7 +8,6 @@
import {Component} from '@angular/core';
import {ComponentFixture, TestBed, async} from '@angular/core/testing';
import {beforeEach, describe, expect, it} from '@angular/core/testing/testing_internal';
export function main() {
describe('binding to CSS class list', () => {
@ -187,6 +186,13 @@ export function main() {
getComponent().arrExpr = ['foo bar baz foobar'];
detectChangesAndExpectClassName('foo bar baz foobar');
}));
it('should throw with descriptive error message when CSS class is not a string', () => {
fixture = createTestComponent(`<div [ngClass]="['foo', {}]"></div>`);
expect(() => fixture.detectChanges())
.toThrowError(
/NgClass can only toggle CSS classes expressed as strings, got \[object Object\]/);
});
});
describe('expressions evaluating to sets', () => {