Angular2で一度クリックしたボタンを無効にする

Question

私は愚かな問題がありますが、私はそれを克服する方法を知らなかったAngular2（Typescript）のものはのツールではありません。してください私は単純に、私は一度クリックしたdisabledにボタンの状態を変更したい、私はJavascriptの方法を発見し、このHTMLコードに

<div class=" uk-align-center" > 
<a class="md-btn md-btn-success" >Start</a> 
<!--<a class="md-btn disabled" *ngIf="">Start</a>--> 
</div> 

をしているが、それらのどれも私のために働いていない、任意のヘルプ？

Answer 1

<a class="md-btn md-btn-success" 
    [class.disabled]="isClickedOnce" 
    (click)="isClickedOnce = true">Start</a> 

Answer 2

私はAngular2-RC2を使用しています。これは私が* ngIfを使用する方法です。おそらくそれが役に立ちます。 注：この例では、ボタンを押すと無効になるため、このボタンをクリックして関数unpushMe（）を呼び出すことはできません。

テキストarea.component.ts

import {Component} from '@angular/core'; 

    @Component({ 
    selector: 'textarea-comp', 
    template: ` 
     <div> 
      <div *ngIf="!isPushed" > 
       <p><button (click)="pushMe()">push2disable</button></p> 
     </div> 
     <div *ngIf="isPushed" > 
       <p><button (click)="unPushMe()" disabled >disabled</button></p> 
     </div> 
    ` 
    }) 

    export class TextAreaComponent { 
      isPushed: boolean = false; 


    pushMe() { 
      this.isPushed = true; 
     } 
     unPushMe() { 
      this.isPushed = false; 
     } 
    } 

Answer 3

あなたは、クラスに対処するためにngClassディレクティブを使用することができ

：、あなたのコンポーネントに触れることなく、次のアプローチを使用することができます

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <div class=" uk-align-center" > 
     <a [ngClass]="{'md-btn md-btn-success': !isButtonDisabled, 
         'md-btn disabled': isButtonDisabled }" 
      (click)="isButtonDisabled = !isButtonDisabled;">Start</a> 
     </div> 
    </div> 
    `, 
    styles: [ 
    ` 
    .md-btn md-btn-success { 
    ... 
    } 
    .md-btn disabled { 
    ... 
    } 
    ` 
] 
}) 
export class App { 
    isButtonDisabled: false; 

    constructor() { 
    } 

} 

Answer 4

コード側の別の解決策：

<button name="submitButton" #submitButton type="submit" class="btn btn-primary" (click)="onButtonClick()">Submit</button> 

import { ViewChild, ElementRef } from '@angular/core'; 

@ViewChild('submitButton') submitButton:ElementRef; 

onButtonClick() 
{ 
    this.submitButton.nativeElement.disabled = true; 
    //Do some other stuff, maybe call a service etc... 
    this.submitButton.nativeElement.disabled = false; 
}