Rxjs/Typescript: ExpressionChangedAfterItHasBeenCheckedError
Rxjs/Typescript: ExpressionChangedAfterItHasBeenCheckedError 是一个在使用 RxJS 和 TypeScript 进行开发时可能遇到的错误。
这个错误通常发生在 Angular 框架中，当组件的模板中绑定的数据发生变化时，Angular 在变化检测机制中会先进行一次检测，然后再更新视图。但是当使用 RxJS 中的异步数据流时，可能会导致数据变化发生在变化检测之后，从而引发这个错误。
为了解决这个问题，可以采取以下几种方式：
- 使用 ChangeDetectorRef.detectChanges()：在组件中注入 ChangeDetectorRef，并在数据变化后手动调用 detectChanges() 方法进行变化检测。这样可以跳过 Angular 的默认变化检测机制，避免错误的发生。
- 使用 ChangeDetectorRef.markForCheck()：与 detectChanges() 类似，但是 markForCheck() 方法只是标记组件为需要进行变化检测，而不是立即执行检测。这样可以延迟到下一次变化检测周期执行检测，提高性能。
- 使用 async 管道：在模板中使用 async 管道可以处理异步数据流，并确保数据变化发生在变化检测之内，避免错误的发生。
- 使用 ngZone.run()：在 RxJS 的订阅回调中，使用 ngZone.run() 方法将回调代码包裹起来，这样可以确保回调代码在 Angular 的变化检测范围内执行，避免错误的发生。
总之，ExpressionChangedAfterItHasBeenCheckedError 是一个在使用 RxJS 和 TypeScript 进行开发时可能遇到的错误，通过采取以上方式可以解决这个问题。腾讯云提供了丰富的云计算产品和服务，可以根据具体需求选择适合的产品，具体信息可以参考腾讯云官方网站。
相关·内容
有这样一个错误：
错误: ExpressionChangedAfterItHasBeenCheckedError:表达式检查后发生了更改。先前的值：'ngTemplateOutlet: undefined‘。当前值：'ngTemplateOutlet: object Object‘。
在viewDebugError (core.js:9775)
在expressionChangedAfterItHasBeenCheckedError (core.js:9753)
在checkBindingNoChanges (core.js:9920)
在checkNoChangesNode
浏览 2提问于2018-07-04得票数 4
我已经用angular2中的以下内容更新了Package.json引用，但是在更新之后，我在浏览器控制台中得到了以下404错误：
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:55413/angular2/src/facade/async Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:55413/a
浏览 0提问于2016-07-01得票数 0
回答已采纳
4回答
我有重复的角度问题，但我搜索了很多关于这个问题，并使用了所有的技术，在堆叠溢出和.。
我的问题是当我订阅一个以上的加载程序组件时。
这是我的装载机组件
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, DoCheck, OnChanges, AfterViewInit, OnInit } from '@angular/core';
import { Subject, BehaviorSubject } from 'rxjs';
import { LoaderService } from
浏览 0提问于2019-09-01得票数 0
回答已采纳
1回答
版本
npm: 3.10.9
systemjs: 0.19.41
typescript: 1.8.10
rxjs: 5.0.3
背景
我有一个项目(用类型记录编写)，我试图将rxjs添加到其中，但是在通过systemjs加载捆绑文件时遇到了一个问题。
SystemJs配置
System.config({
transpiler: 'typescript',
paths: {
'src:*': '/src/*',
'npm:*': '/node_modules/*'
浏览 1提问于2017-01-11得票数 0
回答已采纳
TL;DR：
当使用带有ExpressionChangedAfterItHasBeenCheckedError的迭代器时，角会引起ngFor。
我有一个使用ngFor的模板，如：
<div *ngFor="let something of foobarIterator()">
TypeScript代码如下所示：
private foobar = [];
public foobarIterator() {
return this.foobar[Symbol.iterator]();
}
根据角度文档，它被允许将迭代器传递给，并且它实际上可以工作…。只不过它
浏览 1提问于2018-05-23得票数 4
我试图将rxjs集成到我的typescript项目中，但最终出现了以下错误。
BehaviorSubject.js:5 Uncaught ReferenceError: exports is not defined
at BehaviorSubject.js:5
testSubject.ts:22 Uncaught TypeError: Cannot read property 'BehaviorSubject' of undefined
包含行为主体的文件，
import { BehaviorSubject } from 'rxjs/BehaviorSubj
浏览 15提问于2021-06-01得票数 1
我试图使用用TypeScript编写Node.js服务器，但在将fs.readFile转换为rxjs形式时遇到了错误。我希望下面的代码可以在TypeScript中工作
// This is a JavaScript example from the official documentation. It should
// also work at the TypeScript envrionment.
import * as fs from 'fs';
import { Observable } from 'rxjs';
let readFileAsObse
浏览 0提问于2017-04-18得票数 8
回答已采纳
我已经编写了最简单的Codepen来测试一些Typescript/RxJS的东西，并且我得到了一个控制台错误：
Uncaught ReferenceError: exports is not defined
作为参考，整支笔就是这一行(包含RxJS并打开Typescript编译)：
import { Observable } from 'rxjs';
这支笔在上。有没有人有过这样做的经验？
浏览 98提问于2019-03-05得票数 2
回答已采纳
我正在使用Plunker编辑器来显示演示。我的演示是一个angular 2项目，其中包含我的开源npm包ng-ui-application，该包已经发布。当我在config.js中绑定npm包时，它起作用了。
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
&
浏览 6提问于2017-03-02得票数 0
回答已采纳
使用Plunker提供的默认模板来创建angular2应用程序，我一直在尝试将angular2-moment导入我的Plunker上的angular2应用程序中。
import * as moment from 'moment';
这就是我的柱塞config.js的样子
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecora
浏览 9提问于2016-12-30得票数 0
我使用Ionic2创建了一个聊天应用程序。当我试图使用ionic cordova build android --prod --release进行生产构建时，我会得到以下错误。
Error: ./node_modules/rxjs/observable/BoundCallbackObservable.js
Module build failed: TypeError: Cannot read property 'type' of undefined
at Object.getEffectiveTypeAnnotationNode (C:\Users\cool\D
浏览 1提问于2017-11-29得票数 3
回答已采纳
我的离子型3配置是“@离子型/应用-脚本”："3.1.1"，“类型记录”："2.4.2“
而依赖关系是
“@角/共同”：“5.0.1”、“@角/编译器”：“5.0.1”、“@角/编译器-cli”：“5.0.1”、“@角/核心”：“5.0.1”、“@角/形”：“5.0.1”、“@角/http”："5.0.1"，“@角/平台-浏览器”："5.0.1“、”@角/平台-浏览器-动态“："5.0.1”、“@离子型-原生/呼叫-编号”："^4.5.2“、”@离子型-原生/摄像机“："^4.5.2”、“@离子型-原生/核心”："
浏览 3提问于2017-12-27得票数 1
回答已采纳
在从Beta-17迁移到RC4之后，我面临的问题很少。我收到以下编译错误
自举误差
/// < reference path="../node_modules/angular2-in-memory-web-api/typings/browser.d.ts" >
import {bootstrap} from '@angular/platform-browser';
Error: Module "../platform-browser/index" as no exported member bootstrap
路由器错误
import
浏览 9提问于2016-07-01得票数 2
回答已采纳
2回答
我用的是角形和rxjs。我的问题是显示一个加载指示器
isLoading: BehaviorSubject<boolean> = new BehaviorSubject(false);
ngOnInit() {
this.items = this.route.paramMap.pipe(
tap(() => this.isLoading.next(true)),
switchMap((params: ParamMap) => this.myservice.getItems(params.get("id"))),
浏览 1提问于2020-02-22得票数 0
回答已采纳
2回答
我正在尝试使用RollupJS捆绑我的RollupJS应用程序，但我遇到了一些问题：
无法找到我的AppComponent引用的css文件并抛出一个错误。
错误转换/演示-使用“角”插件的app.ts: ENOENT:没有这样的文件或目录，打开/演示-app.css
为了解决这个问题，我编写了一个gulp任务来将我的scss文件编译成css。但我的印象是，卷轴能够做到这一点。
rxjs模块会导致错误。
模块/节点_模块/rxjs/可观察的/ of . by不导出(由/@转角/路由器/src/apply_redirects.js导入)
我试过使用rollu
浏览 4提问于2017-02-25得票数 0
项目在使用CDN引用时运行，但不使用脚本引用。我已经检查过了，正确的文件正在被Gulp复制到www.root文件夹。
systemjs.config.js
这工作：
(function (global) {
var ngVer = '@2.0.0-rc.4';
var routerVer = '@3.0.0-beta.1';
var formsVer = '@0.2.0';
var map = {
'app': 'app',
'@angular': 'https://np
浏览 0提问于2016-07-05得票数 0
回答已采纳
1回答
使用toPromise引发错误
旧方法：
import 'rxjs/add/operator/toPromise';
最新方式：
import { toPromise } from 'rxjs/operators';
最新的方法显示了以下错误：
ts模块‘d:/./node_ Module /rxjs/operators/index’没有导出成员'toPromise‘。
版本：
"typescript": "2.4.2"
"rxjs": "5.5.2",
浏览 3提问于2017-12-08得票数 2
回答已采纳
创建了一个Vue3 + typescript项目，并使用vue cli添加了RXJS7依赖项。 当我尝试import { Observable } from 'rxjs'时，我得到的是Could not find a declaration file for module 'rxjs' 尝试添加@types/rxjs或添加declare module 'rxjs'不起作用。将rxjs添加到tsconfig类型也不会。
浏览 112提问于2021-07-15得票数 1
3回答
is 95422:27原始异常：WEBPACK_IMPORTED_MODULE_3_rxjs_Observable.Observable.zip不是函数
试过各种进口
// import 'rxjs/add/operator/zip';
// import 'rxjs/add/observable/zip-static';
// import 'rxjs/add/operator/zip';
import 'rxjs/operator/zip';
试着像这样使用它：
const zippedUsers: Observabl
浏览 4提问于2017-05-16得票数 12
回答已采纳
在最新版本的RC4中，Rxjs可以在node_modules或npmcdn.com目录下使用。
成功的柱塞但不使用.umd.js
这是下载单个文件的“网络”选项卡屏幕截图。
当然，这个设置使许多单独的RxJS文件下载，因为它是在本地读取文件，而不是.umd.js
但是，与其他AngularJS文件一样，当我尝试使用单个umd.js文件时，会发生以下错误。
GET https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Subject 404 ()
GET https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Obse
浏览 8提问于2016-08-05得票数 6
1回答
为什么下面的TypeScript代码会编译，但是systemjs不能在运行时正确地加载依赖项？
import { Observable } from 'rxjs';
let temp123 = new Observable<String>();
然而，这样做是可行的：
import { Observable } from 'rxjs/Observable';
let temp123 = new Observable<String>();
具体来说，第一个代码将生成一个包含以下代码的.js文件：
var Observable_1 = req
浏览 6提问于2017-01-20得票数 3
回答已采纳
我正在运行一个角8应用程序，我收到了一个错误，这似乎是RxJS中的一个主要错误，或者我遗漏了什么。
import { of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
of(1,2,3)
.pipe(
switchMap((x) => of(x + 1))
)
现在，我希望订阅者能够接收到以下输出：
//2, 3, 4
但是，相反，它输出了我在switchMap操作中返回的可观察到的实际值：
//Observable<number>, Observable
浏览 0提问于2019-06-13得票数 0
回答已采纳
目前，我正在开发Angular 2。我必须演示Angular 2提供的所有功能。我面临的问题是DI issue.Dependency注入无法工作。
这是我的system.config.js
(function (global) {
var map = {
'@angular': '/node_modules/@angular', // sufficient if we didn't pin the version
'@service': '/scripts/app.service',
'
浏览 0提问于2016-09-14得票数 0
回答已采纳
我试图使用rxjs主题在组件之间共享数据，并且在组件中使用了这些数据
Component.html
<div class="spinner-container" *ngIf="loading">
<div class="spinner-item">
<nx-spinner nxSize="large"></nx-spinner>
</div>
</div>
component.ts
ngOnInit(){
浏览 0提问于2019-10-22得票数 2
回答已采纳
我想使用RxJs (5.0.0-Beta.6)和TypeScript (1.8.10)创建一个JS。
我的简单TypeScript文件正在编译。我有这些文件：
MyLib.ts:
/// <reference path="../../typings/globals/es6-shim/index.d.ts" />
import * as Rx from 'rxjs/Rx';
Rx.Observable.of('foo', 'bar');
tsconfig.json:
{
"compilerOptions&
浏览 2提问于2016-09-22得票数 0
回答已采纳
在我将项目中的角2升级到rc.1、IDE、PHPStorm 2016.1之后，找不到大量的属性和静态函数，例如从可观察的类(rxjs)中找到的。比如: Observable.of，Observable.forkJoin。
我使用类型记录作为角2开发的默认语言。
我认为我的问题类似于这个问题：，但是PHPStorm没有有用的信息。
关于这个问题的图片：
我导入了可观察的，像这个-和这个工作的角度2β16。
import 'rxjs/Rx'; import {Observable} from "rxjs/Observable";
这是我package.json的一部
浏览 4提问于2016-05-29得票数 1
回答已采纳
看起来在RxJS 6的typescript中导入更加清晰了，但是在javascript中如何导入take操作符呢？
尝试过
import 'rxjs/operators/take';
还尝试过使用ES6：
import { take } from 'rxjs/operators';
但没有起作用。抱怨take不是一个函数。
浏览 1提问于2018-05-25得票数 1
我试图用rxjs过滤一个可观察到的数字数组。但是，作为类型提示，TypeScript告诉我，filter运算符得到一个number[]数组，而不是number，我认为这是不正确的。根据，rxjs过滤器操作符谓词应该接受一个项，而不是其中的一个数组。这是TypeScript类型中的错误，还是下面的示例中有错误？
浏览 1提问于2019-07-12得票数 1
回答已采纳
2回答
我已经使用JSPM和SystemJS设置了我的SystemJS项目。我尝试导入RxJS和boot.ts文件中的几个操作符，但是导入不会被转移到boot.js输出中。所以
// boot.ts
import {Observable} from 'rxjs/Observable'
import 'rxjs/add/operator/debounceTime'
...
正如这里所概述的：的结果是
// boot.js
System.register(['rxjs/add/operator/debounceTime', ...
tsc (用1.7.5和1
浏览 2提问于2016-02-12得票数 3
回答已采纳
1回答
app起点版本：
11.2.14typescript: 4.0.7rxjs: 6.X
我想将rxjs库更新为最新版本(7.1.0)，所以我执行了npm安装rxjs@ update，然后运行ng serve。然后我犯了很多错误，看上去像是打字稿问题。这里的例子：
有一种方法可以在不给每个rxjs操作返回值的情况下解决它？(在没有给出rxjs 6类型的情况下工作正常)
浏览 2提问于2021-06-06得票数 2
我正在创建一个支持Typescript的Electron应用程序。我想在nodeIntegration设置为false的情况下在渲染器进程中使用RxJS库。 在特定窗口中，我包含了RxJS by <script type="text/javascript" src="../node_modules/rxjs/bundles/rxjs.umd.min.js"></script> 在渲染器过程中，我通过以下方式导入特定的观察值和运算符 const { fromEvent } = (window as any).rxjs;//require(
浏览 12提问于2020-10-13得票数 1
回答已采纳
有没有人可以和react native分享任何关于typescript和rxjs的示例应用程序?我必须用ts和rxjs开发一个react原生应用程序，我不确定如何继续。
浏览 10提问于2019-03-13得票数 0
这是一个旧的angularjs项目，我在其中添加了TypeScript，希望最终迁移到Angular 2+。
我想在我的TypeScript代码中使用rxjs可观察性，但是尝试这样做会有一些不寻常的行为。Visual studio 2019找不到类型，但visual studio代码可以。当直接通过tsc编译时，它构建得很好，并且在visual studio 2019中运行它也可以像预期的那样工作，但是当编写带有“无法找到模块'rxjs'”消息的代码时，没有显示任何类型信息。
我通过npm install rxjs --save安装了rxjs，可以在mode_modules/r
浏览 28提问于2020-05-28得票数 1
1回答
我正在使用这个伟大的回购我的角2测试项目(TypeScript) - 。我需要使用Observable.of(..).当我试图导入它时：
import { Observable } from "rxjs/Observable";
import { of } from 'rxjs/observable/of';
我得到：
属性'of‘不存在于’类型可观察‘上。
我还尝试了以下方法：
import { Observable } from "rxjs/Observable";
import { of } from 'rxjs/ad
浏览 2提问于2016-11-13得票数 22
回答已采纳
我将TypeScript与RequireJS结合使用。正如您在下面的图像中所看到的，我使用RequireJS配置定义了一些导入；当然，这些导入是通过<script>标记获得的：
TypeScript看不到这些声明，所以我想把它们声明为全局值或其他什么的，以避免传递溢出错误。在这种情况下，最好的做法是什么？一切似乎都运行得很好，但我确实得到了更多的编译错误，当然，到处都是红色语法突出显示。
在第一个图像中，我们看到requirejs没有被识别，在下面的图像中，我们看到TypeScript不知道'redux'是什么(但它在RequireJS配置中)。
浏览 2提问于2017-01-20得票数 2
回答已采纳
import { Injectable } from '@angular/core';
import { Book } from './book';
import { Observable } from 'rxjs';
import { of } from 'rxjs';
import 'rxjs/add/operator/map';
@Injectable({
providedIn: 'root'
})
export class BookService {
constructor
浏览 27提问于2020-07-06得票数 0
1回答
我已经在我的Range6应用程序中实现了加载程序组件代码。下面是html，component，css代码html代码。
<div [class.hidden]="!show">
<div class="loader-overlay">
<div *ngIf="show" class="loader"></div>
</div>
</div>
component.ts代码
import { Component,
浏览 0提问于2018-12-11得票数 0
我已经为我的strictNullChecks应用程序启用了TypeScript。我正在使用RxJS 5，它是用TypeScript编写的。然而，它还没有启用strictNullChecks。
因此，当我做以下工作时：
Observable.fromEvent(document.getElementById('button'), 'click')
我得到以下错误：
Error TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type &#
浏览 3提问于2016-12-02得票数 0
回答已采纳
我想要创建一个可观察的，它在.75秒之后解析。我试过这样做，但可观察到的是立即解决：
import { Observable } from 'rxjs/Observable';
import { delay } from 'rxjs/operators/delay';
...
refresh(): Observable<any> {
// Return an observable that resolves after .75 seconds
return Observable.create().pipe( delay(750) );
}
我
浏览 0提问于2017-12-08得票数 0
回答已采纳
2回答
吞咽concat不能正常工作
、、、、
我尝试使用Gulp将Angular 2应用程序构建为单个最小化的js文件，但是gulp-concnat插件似乎不能正常工作。它只需几行配置代码即可构建以下文件。
{"version":3,"sources":["service/rxjs-operators.ts"],"names":[],"mappings":";;;;;;;;;AAAA,uEAAuE","file":"app.js","sourcesContent":["// import
浏览 5提问于2016-06-07得票数 0
我正在将angular应用程序从5迁移到6。
ng update @angular/cli和ng update @angular/core
但是现在如果我运行ng build，我会得到这个错误
Cannot find module 'typescript' from 'C:\..\App'
Error: Cannot find module 'typescript' from 'C:\..\App'
at Function.module.exports [as sync] (C:\..\App\MyApp\node_mod
浏览 0提问于2018-06-14得票数 9
回答已采纳
我有一个项目TypeScript项目，并使用RxJ。当运行构建(这是对webpack的简单调用)时，我会得到以下错误：
TS7016: Could not find a declaration file for module 'rxjs'. '<mypath>\node_modules\rxjs\index.js' implicitly has an 'any' type.
与另一个可以工作的项目相比，我注意到RxJs版本的不同之处：
"rxjs"："^6.6.7“-> works
"rx
浏览 5提问于2021-05-20得票数 2
回答已采纳
2回答
在我们的Angular应用中，我们使用了来自Telerik的控件，如下所示：
<kendo-recurrence-editor [start]="startDate" (valueChange)="onRecurrenceChange($event)">
</kendo-recurrence-editor>
不幸的是，所以没有办法使用正常的模型绑定。这就是为什么我们只能使用valueChange事件。
如果有人更改了此控件的输入值，则会正确调用onRecurrenceChange函数：
public onRecurrenceChange(
浏览 31提问于2020-03-12得票数 0
我在努力学习RxJ。
在'"c:/Users//Desktop/iooioi/src/main/webapp/node_modules/rxjs/Rx"‘中，我已经安装了rxjs，但是它的抛出错误ts模块没有默认的.。
提供下面的package.json
我像这样从“rxjs”中导入{rxjs}；
你可以在这里看到它，
{
"name": "sports",
"version": "1.0.0",
"scripts": {
"start
浏览 0提问于2017-10-15得票数 0
我得到了错误TS2354:这个语法需要一个导入的助手，但是找不到模块'tslib‘。在我的webpack 2构建中使用了新的importHelpers选项TypeScript 2.1。包的构建似乎与预期的一样，但错误消息令人不安。有人能指出我在这里做错了什么吗？还是rxjs\Subject.d.ts在每个错误(提到的行(Subject.d.ts:9,43)使用和无辜的extends关键字)方面有问题？
ts-loader: Using typescript@2.1.4 and C:Repro\stuff\tsconfig.json
Hash: f24da06626836e4fc997
浏览 2提问于2016-12-13得票数 0
回答已采纳
我有一个Angular 2 Service，意思是一些组件正在使用的typescript类，它通过http从web服务获取数据。ng服务使用的是Angular的http、rxjs Observables和observable运算符。我需要在一个完全不同的应用程序中重用这个ng服务，这个应用程序是vanilla JS (没有angular，没有typescript)。
是否可以只编译ng服务及其依赖项(http、rxjs)，并将其打包成可在浏览器中使用的独立的自给自足的JavaScript模块？
浏览 1提问于2017-04-19得票数 1
我想用一个rxjs5静态函数扩展Observable类。我可以在普通的JavaScript中这样做：
var myStaticFn = function() { /* ... */ };
Observable.myStaticFn = myStaticFn;
这是可行的，但是在TypeScript中，我不能访问Observable.myStaticFn，因为属性myStaticFn在类Observable中不知道。
如何声明/增强rxjs5模块Observable类，以便以类型安全的方式访问函数？
注意:作为起点，下面的示例演示如何将非静态函数扩展到可观察的(例如创建自定义的rxjs操作符)，
浏览 4提问于2016-10-13得票数 2
回答已采纳
我在TypeScript和Node.js中使用RxJS时遇到了问题。我正在使用NPM，我已经包含了rxjs-es版本5。我也在使用类型，并且我已经包含了es6-shim和rx.all，如下所示：
{
"ambientDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
"rx.all": "registry:dt/rx.all#2.2.28+20160316155526"
}
}
下面是我的tsc
浏览 9提问于2016-04-29得票数 15
我正试图在我的角度项目中添加一个规则：rxjs/no-unsafe-takeuntil
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"module": "es2020",
"sourceMap": true,
"declaration": false,
"moduleResolution": "n
浏览 4提问于2021-07-20得票数 0
1回答
我正在升级我的应用程序到角6，并遵循指南。但是升级过程并不像他们声称的那么顺利。
我目前正努力使用以下命令将rxjs 5迁移到6。
rxjs-5-to-6-migrate -p src/tsconfig.app.json
我所做的：
首先，我运行了：npm install -g rxjs-tslint，它给了我下面的输出：
npm WARN tslint@5.9.1 requires a peer of typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-d
浏览 0提问于2018-08-20得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
