クリックで値を変更する方法は？

クリック時に値を変更してクリックに反映させるにはどうすればよいですか？クリックで値を変更する方法は？

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <div id="print-section"> 
     Test print {{ name }} 
     </div> 
     <button (click)="print()">print</button> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 

    name="Red"; 

    constructor() { 
    } 


    print(): void { 
    let printContents, popupWin; 

    this.name="Blue"; 

    printContents = document.getElementById('print-section').innerHTML; 
    popupWin = window.open('', '_blank', 'top=0,left=0,height=700,width=1000'); 
    popupWin.document.open(); 
    popupWin.document.write(` 
     <html> 
     <head> 
      <title>Print tab</title> 
      <style> 
      //........Customized style....... 
      </style> 
     </head> 
    <body onload="window.print();window.close()">${printContents}</body> 
     </html>` 
    ); 
    popupWin.document.close(); 
} 


}

ここで私はname = "Red"と宣言しました。印刷をクリックした後、青色になります。しかし、それは最初のクリックで同じです。

https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview

出典

2017-11-30 Tanvir

私のテストしていません。ボタンをクリックすると、テキストが青色に変わります。 https://plnkr.co/edit/iiAJA01moYpbISojkLeT?p=preview –

this.name="Blue"; 

printContents = document.getElementById('print-section').innerHTML;

あなたのコードが実行される同期ので、あなたの同期タスクが完了するまで、DOMが更新されていない：それはここで

がリンクである第二クリックで変更します。

あなたはそれを動作させるために

this.name="Blue"; 

setTimeout(() => { 
    printContents = document.getElementById('print-section').innerHTML; 
    // ... rest of your iframe code 
});

を使用することができます。しかし、それは確固たるデザインの選択ではありません。

出典

2017-11-30 11:28:02 j2L4e

クリックで値を変更する方法は？

答えて

関連する問題