属性ディレクティブのDoCheckの使用

Question

ngForを使用して単純なアプリケーションを作成し、配列から一連のボタンを作成しました。ボタンをクリックすると、その値が2番目の配列にプッシュされます。

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); 
     } 
    } 
} 

Answer 1

あなたはbuttonの[disabled]プロパティにバインドすることができます。あなたのコントローラに関数を作成します。isButtonDisabled(button)テンプレートから項目を渡します。関数内

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

アイテムが既に二番目の配列に押し込まれている場合、チェック。

「はい」の場合、return trueボタンが無効になります。

Answer 2

directiveを使用する代わりに、コンポーネントのaddItem()メソッドでチェックを実行しないようにしてください。

DoCheck()の方法は、変更検出サイクルが実行されるたびにになるので、制限された使用が必要です。。あなたはそれを使用する際に注意する必要があります。

DoCheck()の代わりにOnChanges()を使用することが好ましいのは、前者が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()に移動します。