Установить текст для интерполяции в 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