htmlの補間用テキストを設定する

Question

{{buttonText}}の動的値を設定する方法は誰でも知っていますか？

これ以上表示する記事がない場合は、{{buttonText}}が「表示が少ない」と表示されるようにしたいと考えています。

マイHtmlの

<button ion-item (click)="items.showMore2 = !items.showMore2; items.showMore1 = !items.showMore1; items.toggleMore2 = !items.toggleMore2; items.toggleMore1 = !items.toggleMore1" [hidden]="items.toggleMore1" text-center detail-none large> 
    <h4 class="showMoreText"><ion-icon name="arrow-down" *ngIf="!items.arrow"></ion-icon> 
    <ion-icon name="arrow-up" *ngIf="items.arrow"></ion-icon> {{buttonText}}</h4> 
</button> 

すべてのヘルプは歓迎です！

Answer 1

最初は、angular.io補間のガイドを参照することをお勧めします。これは実際には角度の基本であるためです。そのウェブサイトにダイビングをしてガイドと料理本を読んで、角度の基礎を掴んでください。

あなたの@Componentクラス内の変数を設定することができます。

@Component({ 
    template: `<div>{{buttonText}}</div> 
}) 
export class AppComponent { 

    public buttonText: string = "test"; 

} 

あなたのコンポーネント内に定義された任意の変数/メソッドは、テンプレート内の変数を変更して、テンプレート内

Answer 2

{{buttonText}} 

export class App{ 
    buttonText:string="test"; 
} 

Answer 3

をある使用することができます可能ですが、あなたはそれのためにどんなイベントも必要とします。

<div> 
    <h2 (click)="name = 'test'">Hello {{name}}</h2> <!-- simple --> 
    <h2 (click)="name = names[(index = ((index + 1) % names.length))]">Hello {{name}}</h2> <!-- expert --> 
</div> 

ライブデモ：https://plnkr.co/edit/SePBxTOvOKlSE2gQ8Xi2?p=preview