将 'as' 与 *ngIf 一起使用答案

【问题标题】：Using 'as' like with an *ngIf将 'as' 与 *ngIf 一起使用
【发布时间】：2020-11-18 07:17:22
【问题描述】：

使用*ngIf 时，您可以执行*ngIf = (value$ | async).property as prop 之类的操作，然后在整个代码中使用prop，而无需每次都重复很长的(value$ | async).property 。但是，这仅在 (value$ | async).property 是一个真实值时才有效 - 例如，如果它为零。

我的问题是 - 我怎样才能仍然获得 as 的好处，但如果值是假的，仍然有元素显示？或者更好的是，有没有办法在*ngIf 之外使用as 等？

【问题讨论】：

您可以在component.ts 中定义一个可以在代码中使用的属性。在我看来，这似乎是最好的方法。在 *ngIf 范围之外定义 prop 并不是真的打算（我认为不可能）。但是，如果您知道在 *ngIf 范围之外使用 prop 没有任何价值，那又有什么意义呢？您始终可以定义 *ngIf="(value | async) as prop; else noProp" 并将 #noProp 分配给组件模板中某处的 ng-template 元素。
谢谢，但是如果我在我的组件中定义它，那么我需要订阅 observable，而不是利用异步管道。我想显示虚假值，因为在这种情况下它是一个枚举。我仍然想显示第一个值，我只是想要一种快捷方式访问属性的方法。如果没有解决方案，我将在元素内所有我需要的地方重复 (value$ | async).property

标签： angular angular-ng-if

【解决方案1】：

PMO1948，“诀窍”是创建一个对象，归功于 Yury Katkov

<div *ngIf="{values: (value$ | async)} as prop">
    ..inside use, e.g.
    {{prop.values?.property}}
    <div *ngIf="!prop.values">
        the observable return nothing
    </div>
</div>

如果"value$ |async" 什么都不返回，则*ngIf 仍然存在

Sample Demo

【讨论】：

如果我这样做了，我仍然需要使用prop.values.property，而不是直接使用prop，否则我可以使用。所以真的我只是把它从 (value$ | async).property 改成 prop.values.property 这并没有真正缩短它
您的代码中还有一个语法错误 - 有一个关闭 } 没有打开一个
感谢@OwenKelvin 的纠正并感谢 PMO1948 的评论

【解决方案2】：

以下是您可以使用|| 实现的另一个技巧

<div *ngIf="(value$ | async) || {}  as prop">
    ..inside use, e.g.
    {{prop.property}}
    <div *ngIf="!prop.property">
        the observable return nothing
    </div>
</div>

See Demo Here

更新

遇到ngrxLet Structural Directive，这看起来是一个有趣的解决方案

*ngrxLet 指令提供了一种将可观察对象绑定到视图上下文（dom 元素范围）的便捷方式 *ngrxLet 指令是通过 ReactiveComponentModule 提供的。`

import { NgModule } from '@angular/core';
import { ReactiveComponentModule } from '@ngrx/component';

@NgModule({
  imports: [
    // other imports
    ReactiveComponentModule
  ]
})
export class MyFeatureModule {}

有了以上就可以使用了

<div  *ngrxLet="value$ as prop">
    ..inside use, e.g.
    {{prop.property}}
    <div *ngIf="!prop.property">
        the observable return nothing
    </div>
</div>

【讨论】：

虽然仍然启用显示，但对于枚举的第一个对象，我没有得到正确的值，而是得到 {}
@PMO1948 这可能是一个较晚的更新，但我相信它值得一试