Angular2 - *ngIf 和异步可观察量

2024-05-06

我在将 *ngIf 与可观察变量一起使用时遇到问题。问题是,当我隐藏元素时*ngIf,然后再次显示,值将不会加载,因此:

        <div *ngIf="showDiv">
             {{ someObservable$ | async }}
        </div>

基本上当 showDiv 设置为true首先,加载了 someObservable,但是当我将其设置为false然后再次到true,值不会加载。怎么了?

Regards


UPDATE:

感谢 j2L4e 的提示!

BehaviorSubject是关键!

看看这个笨蛋:

https://plnkr.co/edit/whkrQk3tHCJCvvi6rlaE?p=info https://plnkr.co/edit/whkrQk3tHCJCvvi6rlaE?p=info

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import { Subject, BehaviorSubject } 'rxjs/Rx';
//import { Observable, Subject } from 'rxjs';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 (click)="showMe = !showMe">Hello {{name}}</h2>
      <br />

      <div *ngIf="showMe">
        sbj1: {{  _subj1 | async  }}
      </div>

      <div *ngIf="showMe">
        obs1: {{  _obs1 | async  }}
      </div>

      <div *ngIf="showMe">
        obs2: {{  _obs2 | async  }}
      </div>
    </div>
  `,
})
export class App {

  private showMe = false;

  private _subj1 = new BehaviorSubject<string>();
  private _subj2 = new Subject<string>();
  private _obs1 = this._subj1.asObservable();
  private _obs2 = this._subj2.asObservable();

  constructor() {
    this.name = 'Angular2'

    this._subj1.next('in constructor');
  }

  ngAfterViewInit() {
    this._subj2.next('after view init..');
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular2 - *ngIf 和异步可观察量 的相关文章

随机推荐

  • 为什么我们不在 main 中使用 (void) 呢?

    人们使用void main empty parens 我被教导写作void main void 任何想法有什么区别 我不确定现在的标准是什么 但在传统的 ANSI C 中 使用空括号表示该函数可以采用any参数数量 声明一个void另一方面
  • Python requests_toolbelt MultipartEncoder 文件名

    使用 requests toolbelt 以多部分形式上传大文件 我构建了一个方法 可以成功上传文件 但是我无法访问发布的文件名 如何访问服务器上的文件名 client side file open Volumes Extra test m
  • fread、data.table中的小数点设置

    我想使用 data table 中的 fread 但收到与小数点相关的警告 此处为 而不是 通常我使用 但在某些情况下我必须导入以 作为小数点的文件 在 read csv 中我可以设置小数点分隔符 df lt read csv mydata
  • ' (T_OBJECT_OPERATOR)' aria-label='VSCode 中的 Laravel 9 + PHP 8.0.8 显示语法错误,意外的 '->' (T_OBJECT_OPERATOR)'> VSCode 中的 Laravel 9 + PHP 8.0.8 显示语法错误,意外的 '->' (T_OBJECT_OPERATOR)

    为什么我在 PHP 8 0 8 上新创建的 laravel 9 项目在 Visual Studio Code 中显示错误 VSCode 将其显示为错误 return Limit perMinute 60 gt by request gt u
  • 如何重命名共享库以避免同名冲突?

    我找到了一个图书馆 libjson http sourceforge net projects libjson 我正在尝试将其构建为共享库并在项目中使用 建造很简单 修复 Makefile 错误后 SHARED 1 make install
  • NHibernate 应如何更新映射为版本的属性

    使用流畅的 NHibernate 我在使用映射的类上有一个属性Version Version x gt x Version 当我保存对象时 Version 属性会按照我的预期在数据库中递增 但对象上的属性值似乎只是有时会发生变化 using
  • 您会将什么放入存储库类(数据访问层)的单元测试中?

    我想为我的数据访问层编写一个单元测试 以确保其中的一切正常工作 问题是 我应该把什么样的东西放入测试中 DAL 是静态的Repository隐藏底层 Fluent NHibernate 并通过一个公开的东西向公众公开的类IQueryable
  • 使用 Fig 时,为什么我的卷有时无法安装到 Docker 容器中?

    我在 Docker Fig 环境中看到一个奇怪的问题 我的假设是 这是由于将卷安装到容器的延迟造成的 但我不确定如何确认这一点 我有一个包含以下内容的容器 Dockerfile FROM busybox MAINTAINER Dan Rum
  • OPC-UA 的替代方案 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 作为访问由各种 PLC 组成的系统的过程数据的解决方案 是否有 OPC UA 的合适替代方案 独立于平
  • OS X Mavericks 上的 Python 3 分段错误

    我在 OS X Mavericks 上使用 Python 3 时遇到了分段错误 关于如何解决这个问题有什么建议吗 我尝试从Python站点重新安装该包 但这没有效果 如何在系统上重新编译 Python 3 这个问题的存在是因为这个bug h
  • 使用反射获取静态类列表

    很多问题都很接近 但没有一个能回答我的问题 如何使用 C 3 5 中的反射从程序集中获取所有静态类 我已经定义了所有类型 但没有 IsStatic 属性 计算 0 个构造函数确实很慢 而且也不起作用 有什么提示或一行代码吗 Chris 以下
  • Schema.org 用于列出文章的类别页面

    我正在使用微数据标记我的网站 并询问自己如何标记文章的列表 在类别页面上 我有一篇大文章已标记 但我不知道是否也应该标记该列表
  • formatFloat :将浮点数转换为字符串[重复]

    这个问题在这里已经有答案了 http golang org pkg strconv http golang org pkg strconv http play golang org p 4VNRgW8WoB http play golang
  • ANTLR4性能问题

    关于 ANTL4 解析的性能已经有一些讨论 例如 Antlr 4 解析大型 c 文件需要很长时间 https stackoverflow com questions 19311864 antlr 4 parsing large c file
  • CSS 定位相对于固定/绝对

    如果我对 CSS 显得很 菜鸟 请见谅 我一直在尝试设置以下 0 width 100 height y border 1px solid black a position fixed float left width x height y
  • iOS:UIScrollView 检测滑动手势

    我有一个 UIScrollView 它通过使用计时器自动滚动 每 3 秒滚动到下一页 类似于幻灯片 现在我想实现一个检测任何用户交互的函数 一旦用户与滚动视图交互就取消计时器 以便他可以自己滚动滚动视图 最好的方法是什么 ScrollVie
  • Flex 垂直数据网格

    我可以有一个垂直而不是水平显示数据的数据网格吗 例如 如果这是我的数据提供者 array firstname John lastname Doe array firstname Jack lastname Jill 我希望数据显示如下 Fi
  • 带子图聚合的递归查询(任意深度)

    我问了一个问题earlier https stackoverflow com questions 28036055 recursive query with sub graph aggreagation关于沿着图表聚合数量 提供的两个答案效
  • 使用 MathJax 排版/渲染动态内容

    我使用 MathJax 来显示数学方程 它在静态编写的数学中运行良好 但不适用于动态添加的数学 这是我的代码 Static div span x b pm sqrt b 2 4ac over 2a span div Dynamic div
  • Angular2 - *ngIf 和异步可观察量

    我在将 ngIf 与可观察变量一起使用时遇到问题 问题是 当我隐藏元素时 ngIf 然后再次显示 值将不会加载 因此 div someObservable async div 基本上当 showDiv 设置为true首先 加载了 someO