как привязать данные к текстовому значению кнопки в материале Angular8 - PullRequest
Новая
       18

как привязать данные к текстовому значению кнопки в материале Angular8

0 голосов
/ 19 января 2020

Мне нужна помощь с привязкой данных к тексту кнопки, любая помощь, пожалуйста 

  ngOnInit() {
   this.summaryService.getSummaryAll()
      .pipe(
      take(1)
      ).subscribe(data => this.summary = data);
}

HTML

<button mat-flat-button  class="rectangle">
    <div class="external">{{ summary.tools }} </div>
</button>

Спасибо

1 Ответ

0 голосов
/ 20 января 2020

Комментарий Эльдара, приведенный выше, был ключевым ... Вы можете посмеяться над поведением вызова API с задержкой от обещания или наблюдаемого или вашего API ...

релевантный component.ts : 

export class ButtonOverviewExample {
  summaryPromise = {tools:''};
  summaryObservable = {tools:''};

  constructor(private srv:AppService){
    srv.getButtonTextViaPromise().then(
      (dataa:string)=>{ console.log(dataa); this.summaryPromise = { tools: dataa}; }
    )

    srv.getButtonTextViaObservable().subscribe(
      (dataa:string)=>{ console.log(dataa); this.summaryObservable = { tools: dataa}; }
    )
  }

}

релевантно service.ts : 

  getButtonTextViaPromise() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("text from promise");
      }, 5000);
    });
  }

  getButtonTextViaObservable() {
      return of("text from observable").delay(5000);
  }

релевантно html: 

<button mat-button>{{ summaryPromise?.tools }}</button>
<button mat-button>{{ summaryObservable?.tools }}</button>

завершено рабочий стекблиц

...