如何根据可观测值设置角垫按钮属性？

Question

我有以下代码：

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

offline()和scanning()都返回Observable<boolean>。

我不知道如何使用async管道在scanning()的情况下，似乎offline()是可以的。

Answer 1

新答案：

因此，经过一些试验，我认为您无法阻止在后台.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结果存储在_scanning变量中，并像其他vars一样使用_scanning变量

Answer 2

如果您将逻辑直接移出组件中的(单击)事件之外，它将工作。

相反，调用另一个函数；让我们将其命名为startScan()。StartScan()将检查then ()是否返回true或false，然后触发onScanStop()或onScanStart()。

这肯定能行。