Question

您好知道如何为{{buttonText}}设置动态值。

我希望这样做，以便在没有更多文章展示时，{{buttonText}}将显示为＆＃34;显示更少＆＃34;。

我的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

在html中设置插值文本

3 个答案: