在 html 中设置用于插值的文本

Question

嗨，有谁知道如何为 {{buttonText}} 设置动态值。

我希望以这样一种方式做到这一点，即当没有更多文章要显示时，{{buttonText}} 将显示为"显示更少"。

我的网页

<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