[英]How to set angular mat-button properties based on an observable?
我有以下代码:
<button mat-button [disabled]="offline() | async"
[textContent]="scanning() ? 'Stop' : 'Start'"
(click)="scanning() ? onScanStop() : onScanStart()">
</button>
offline()
和scanning()
都返回Observable<boolean>
。
我不确定在 scan scanning()
的情况下如何使用async
pipe ,对于offline()
似乎没问题。
新答案:
因此,经过一些试验,我认为您无法阻止在 back.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
变量
如果您将逻辑直接移到组件中的 (click) 事件之外,它将起作用。
而是调用另一个 function; 我们称之为 startScan()。 StartScan() 将检查scanning() 是否返回true 或false,然后触发onScanStop() 或onScanStart()。
这肯定会奏效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.