如何根据可观察对象设置 angular mat-button 属性？

Question

我有以下代码：

<button mat-button [disabled]="offline() | async"
    [textContent]="scanning() ? 'Stop' : 'Start'"
    (click)="scanning() ? onScanStop() : onScanStart()">
</button>

offline() 和 scanning() return Observable<boolean>。
我不确定如何在 scanning() 的情况下使用 async 管道，它似乎可以用于 offline()。

Answer 1

如果您将逻辑直接移到组件中的 (click) 事件之外，它将起作用。

改为调用另一个函数；我们称它为 startScan()。 StartScan() 将检查 scanning() returns 是真还是假，然后触发 onScanStop() 或 onScanStart()。

这绝对有效。

Answer 2

新答案：

因此，经过一些试验后，我认为您不能阻止在您的后台 .ts 组件文件中添加一些代码。我们将在您的模板中使用一个名为 _scanning 的变量：

<button mat-button [disabled]="offline() | async"
    [textContent]="_scanning ? 'Stop' : 'Start'"
    (click)="_scanning ? onScanStop() : onScanStart()">
</button>

并在您的 .ts 文件中：

  _scanning: boolean = null;
  ngOnInit(): void {
    this.scanning().subscribe(res => this._scanning = res);
  }

旧答案：

试试这个：

<ng-container *ngIf="scanning | async as _scanning">
    <button mat-button [disabled]="offline() | async "
        [textContent]="_scanning ? 'Stop' : 'Start'"
        (click)="_scanning ? onScanStop() : onScanStart()">
    </button>
</ng-container>

准备好后将 scanning observable 的结果存储在 _scanning 变量中，并像其他变量一样使用 _scanning 变量

如何根据可观察对象设置 angular mat-button 属性？

How to set angular mat-button properties based on an observable?

observable

rxjs

angular

async-pipe