* ngIf条件在angular2中失败时如何调用某种方法？

我有列表（UL）和5个列表元素（LI）加入ngIf条件。当条件满足时，它们将被显示。当条件满足或失败时，我想调用某种方法。我在列表元素上添加了指令，并在ngAfterViewInit（）中调用我的方法。但是当条件失败时，它不会被调用。请提出任何建议。这是我的一段代码。* ngIf条件在angular2中失败时如何调用某种方法？

<ul class="choose-list"> 
<li filter-selection (onWidthChange)="setfullWidth=$event" *ngIf="filter.country.name!=''"><span>{{filter.country.name}}</span><a (click)="onClearFilter('country')" href="#" class="mdi mdi-close"></a></li> 
<li filter-selection (onWidthChange)="setfullWidth=$event" *ngIf="filter.level.name!=''"><span>{{filter.level.name}}</span><a (click)="onClearFilter('level')" href="#" class="mdi mdi-close"></a></li> 
<li filter-selection (onWidthChange)="setfullWidth=$event" *ngIf="filter.institution.name!=''"><span>{{filter.institution.name}}</span><a (click)="onClearFilter('institution')" href="#" class="mdi mdi-close"></a></li> 
<li filter-selection (onWidthChange)="setfullWidth=$event" *ngIf="filter.program.name!=''"><span>{{filter.program.name}}</span><a (click)="onClearFilter('program')" href="#" class="mdi mdi-close"></a></li> 
<li filter-selection (onWidthChange)="setfullWidth=$event" *ngIf="filter.fromYear.name!=''"><span>{{filter.fromYear.name}}</span><a (click)="onClearFilter('fromYear')" href="#" class="mdi mdi-close"></a></li> 
<li filter-selection (onWidthChange)="setfullWidth=$event" *ngIf="filter.toYear.name!=''"><span>{{filter.toYear.name}}</span><a (click)="onClearFilter('toYear')" href="#" class="mdi mdi-close"></a></li> 
    </ul> 

import { Directive, HostListener, ElementRef, AfterViewInit, Input, Output , EventEmitter, Renderer } from '@angular/core'; 


@Directive({selector: '[filter-selection]'}) 
export class FilterSelectionDirective implements AfterViewInit { 

filteredElement; 
addBox; 
list; 
stretchBox; 
holder; 


@Output() onWidthChange: EventEmitter<boolean> = new EventEmitter<boolean>(); 

constructor(private elementRef: ElementRef, private renderer: Renderer) { 
    this.filteredElement = elementRef.nativeElement; 

} 


ngAfterViewInit() { 
    let ctrl = this; 
    this.addBox = this.filteredElement.parentElement.previousElementSibling; 
    this.list = this.filteredElement.parentNode; 
    this.holder = this.filteredElement.parentNode.parentNode.parentNode.parentNode; 
    this.stretchBox = this.holder.firstElementChild; 

    setTimeout(function() { 
     ctrl.refreshWidth() 
    }, 0); 
} 



refreshWidth() { 
    debugger; 
    var listWidth = 0; 

    var items = this.filteredElement.parentElement.children; // all li 

    for (var i = 0; i < items.length; i++) { 
     listWidth += $(items[i]).outerWidth(true); 
    } 
    console.log(listWidth); 

    var newWidth; 


    if (!items.length || $(this.addBox).outerWidth(true) + (listWidth + ($(this.list).outerWidth(true) - $(this.list).width())) > $(this.holder).width() * 0.7) { 
     newWidth = ''; 
     this.renderer.setElementStyle(this.stretchBox, 'width', newWidth); 
     this.onWidthChange.emit(true); //add full width 
    } 
    else { 
     this.onWidthChange.emit(false); //remove full width 
     newWidth = Math.floor((100 - (($(this.addBox).outerWidth(true) + (listWidth + 
      ($(this.list).outerWidth(true) 
       - $(this.list).width())))/$(this.holder).width() * 100)) /** 10*/) /*/ 10*/ + '%'; 

     this.renderer.setElementStyle(this.stretchBox, 'width', newWidth); 
    } 
}

来源

2017-02-16 Shikha

这是一个坏主意。角度变化检测将在每次运行变化检测时调用这些方法，这比条件在真/假之间变化的方式更经常。更改模型时的属性改变使用'Observable'发出的事件（例如，然后从那里调用你的方法。 –

谢谢！问题是，当我称之为clearFilters（）refrehwidth（），列表中的项目还没有从删除。DOM树ngIf渲染后clearFlter（） VAR项目= this.filteredElement.parentElement.children完成; – Shikha

你可以注入'构造函数（私人cdRef：ChangeDetectorRef）{}'和'调用this.cdRef.detectChanges（） '您去除项目后获得的DOM立即更新 - 我没有看到'* ngFor'虽然不能使你的代码的多大意义你应该尝试使用，而不是'渲染更多的绑定...' 。！ –

你可以注入

constructor(private cdRef:ChangeDetectorRef){}

，并呼吁

this.cdRef.detectChanges();

您去除项目后，获得DOM立即更新

来源

2017-02-16 07:37:41

当我添加子组件到这个组件，它提供了异常“类型错误：无法读取属性未定义‘ngDoCheck’” – Shikha

抱歉，但是这不是ENO。呃信息。你是否在某处调用了'ngDoCheck'？ –

没有，当我评论this.cdRef.detectChanges（），则没有发生异常 – Shikha

* ngIf条件在angular2中失败时如何调用某种方法？

回答

相关问题