속성 지시문에 DoCheck 사용

배열에서 일련의 버튼을 만들기 위해 ngFor을 사용하여 간단한 응용 프로그램을 만들었습니다. 버튼을 클릭하면 값이 두 번째 배열로 푸시됩니다.속성 지시문에 DoCheck 사용

DoCheck()을 사용하여 배열의 변경 내용을 수신하고 배열에 값이 이미있는 단추를 두 번 이상 사용할 수 없게하는 특성 지시문 disable이 있습니다.

모두 작동하지만 더 나은 방법이 있습니까? Angular 2 사이트에서는 DoCheck()을 사용할 때주의해야합니다.

보기

<ul> 
    <li *ngFor="let myitem of myitems">{{ myitem }} 
    <a href="#" (click)="deleteItem(myitem)"> x</a> 
    </li> 
</ul> 
<button *ngFor="let item of items" (click)="addItem(item)" [disable]="myitems">{{item}}</button>

특성 지침

@Directive({ 
    selector: '[disable]' 
}) 
export class DisableDirective implements DoCheck { 
    @Input('disable') myitems : string[]; 

    constructor(private el: ElementRef, private renderer: Renderer) { } 

    ngDoCheck() { 
     if(this.myitems.find(item => item === this.el.nativeElement.innerText)) { 
     this.renderer.setElementProperty(this.el.nativeElement, 'disabled', true); 
     this.renderer.setElementClass(this.el.nativeElement, 'disabled', true); 
     } else { 
     this.renderer.setElementProperty(this.el.nativeElement, 'disabled', false); 
     this.renderer.setElementClass(this.el.nativeElement, 'disabled', false); 
     } 
    } 
}

출처

2016-09-23 user1405195

당신은 button의 [disabled] 속성에 바인딩 할 수 있습니다. 템플릿에서 항목을 전달하는 컨트롤러 isButtonDisabled(button)에 함수를 만듭니다. 항목이 이미 제 2 어레이로 가압되면 함수 내부

<button *ngFor="let item of items" (click)="addItem(item)" [disable]="myitems" [disabled]="isButtonDisabled(item)">{{item}}</button>

를 확인한다.

예인 경우 return true 버튼이 비활성화됩니다.

출처

2016-09-23 10:25:16

directive을 사용하는 대신 구성 요소에서 addItem() 메서드를 검사하지 않는 이유는 무엇입니까?

DoCheck() 변경 감지주기가 실행될 때마다 이 실행되므로이 방법은 제한적으로 사용해야합니다 (). 그래서 당신은 그것을 사용하는데 조심해야한다.

DoCheck() 대신 대신에 input 속성이 변경된 경우에만 실행하는 것이 좋습니다.

당신은 시도 할 수 있습니다 :

export class MyComponent implents OnChanges{ 

    addItem(item) { 

    if(this.myitems.find(item => item === this.el.nativeElement.innerText)) { 
      this.renderer.setElementProperty(this.el.nativeElement, 'disabled', true); 
      this.renderer.setElementClass(this.el.nativeElement, 'disabled', true); 
      } 
else { 
      this.renderer.setElementProperty(this.el.nativeElement, 'disabled', false); 
      this.renderer.setElementClass(this.el.nativeElement, 'disabled', false); 
      } 
     } 
    } 

ngOnChanges() { 
this.addItem(item); 
}

이 경우에 당신이 directive를 사용하여 건너 뛸 수 있습니다.

directive을 사용하려면 모든 로직을 DoCheck()에서 OnChanges()으로 이동하십시오.

출처

2016-09-23 10:31:15 candidJ

속성 지시문에 DoCheck 사용

답변

관련 문제