如何将数据绑定到Angular8材料中的按钮文本值

Question

我需要帮助将数据绑定到按钮文本，请提供任何帮助

  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>

谢谢

Answer 1

Eldar 上面的评论是关键...您可以模拟 API 调用的行为，延迟来自 promise、observable 或您的 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>

完成working stackblitz