如何将 Angular 模板变量绑定到涉及异步管道的表达式？

问题描述

我有以下 Angular 模板：

<!-- client\src\app\admin\admin-page\admin.page.html -->

<mat-sidenav-container>

    <mat-sidenav class="sidenav" mode="over" position="start" [opened]="productService.currentProduct$ | async" #productDetails>
        <form (ngSubmit)="productDetails.close()">
            <div class="form-group">
                <!-- error TS2339: Property 'product' does not exist on type 'AdminPage'. -->
                <input class="form-control" type="text" placeholder="Name" name="name" [value]="product.name">
            </div>
            <div class="form-group">
                <!-- error TS2339: Property 'product' does not exist on type 'AdminPage'. -->
                <input class="form-control" type="number" placeholder="Price" name="price" min="0" [valueAsNumber]="product.price">
            </div>
            <!-- more inputs... -->
        </form>
    </mat-sidenav>

    <router-outlet></router-outlet>

    <button mat-fab color="primary" (click)="productDetails.open()">
        <mat-icon>add</mat-icon>
    </button>

</mat-sidenav-container>

无法编译，因为标识符 product 未定义。我想将 product 定义为

productService.currentProduct$ | async as product

我知道它是 *ngIf 的有效语法，但显然不适用于像上面的 [opened] 这样的属性绑定。

有没有一种优雅的方法来做到这一点？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）