fix(compiler): remove attributes when expression in [attr.foo]='exp' evaluates to null

Fixes #4150

Closes #4163
This commit is contained in:
Pawel Kozlowski 2015-09-13 19:05:18 +02:00
parent 9f999dd8e4
commit 045cc8269f
2 changed files with 26 additions and 1 deletions

View File

@ -183,7 +183,8 @@ export class AppView implements ChangeDispatcher, RenderEventDispatcher {
if (b.isElementProperty()) { if (b.isElementProperty()) {
this.renderer.setElementProperty(elementRef, b.name, currentValue); this.renderer.setElementProperty(elementRef, b.name, currentValue);
} else if (b.isElementAttribute()) { } else if (b.isElementAttribute()) {
this.renderer.setElementAttribute(elementRef, b.name, `${currentValue}`); this.renderer.setElementAttribute(elementRef, b.name,
isPresent(currentValue) ? `${currentValue}` : null);
} else if (b.isElementClass()) { } else if (b.isElementClass()) {
this.renderer.setElementClass(elementRef, b.name, currentValue); this.renderer.setElementClass(elementRef, b.name, currentValue);
} else if (b.isElementStyle()) { } else if (b.isElementStyle()) {

View File

@ -167,6 +167,30 @@ export function main() {
}); });
})); }));
it('should remove an attribute when attribute expression evaluates to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp,
new ViewMetadata({template: '<div [attr.foo]="ctxProp"></div>'}))
.createAsync(MyComp)
.then((rootTC) => {
rootTC.debugElement.componentInstance.ctxProp = 'bar';
rootTC.detectChanges();
expect(DOM.getAttribute(rootTC.debugElement.componentViewChildren[0].nativeElement,
'foo'))
.toEqual('bar');
rootTC.debugElement.componentInstance.ctxProp = null;
rootTC.detectChanges();
expect(DOM.hasAttribute(rootTC.debugElement.componentViewChildren[0].nativeElement,
'foo'))
.toBeFalsy();
async.done();
});
}));
it('should consume binding to property names where attr name and property name do not match', it('should consume binding to property names where attr name and property name do not match',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, tcb.overrideView(MyComp,