为什么在组件内部调用 detectorChanges() 不会更新值,但将代码包装在 setTimeout() 中却可以?

2024-03-23

我试图从选项集中自动选择第一个值<mat-autocomplete ...>

export class ExampleComponent implements OnInit, AfterViewInit {

@ViewChildren('auto') matAutocomplete: QueryList<any>;

constructor(private cdr: ChangeDetectorRef) { }

ngAfterViewInit() {
    this.foundItemsList.changes.subscribe(options => {
        // ---> This simply works!
        setTimeout(() => this.matAutocomplete.first._keyManager.setFirstItemActive(), 0);

        // ---> This doesn't works?! No error shown, it just seems that the above function isn't called at all. 
        this.matAutocomplete.first._keyManager.setFirstItemActive()
        this.cdr.detectChanges();
    });
}

https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete.ts https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete.ts

据我所知,什么detectChanges是否检查当前组件及其所有子组件的更改检测器,对吗?但在上面的场景中似乎不起作用。


this.cdr.detectChanges()仅对当前组件(及其后代)运行更改检测。如果setFirstItemActive()导致其他地方发生变化,这不包括在内。setTimeout() or zone.run(...) or ApplicationRef.tick()导致对整个应用程序运行更改检测,因此覆盖每个绑定,而不仅仅是当前组件。

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

为什么在组件内部调用 detectorChanges() 不会更新值,但将代码包装在 setTimeout() 中却可以? 的相关文章

  • Angular 2 - 将延迟作为输入参数传递给组件动画

    我想从 html 传递组件动画的延迟 例如 html
  • Angular2更改检测“表达式在检查后已更改”

    我在 Angular2 最终版本 中遇到了有关组件之间的更改检测和数据流的问题 我已经解决了这个问题 但对我来说似乎有点老套 所以想知道是否有更好的方法 基本上我有一个组件 A 它有一个子组件 B 还有 ngFor 创建多个子组件 C 对于
  • Angular2 RxJS从地图函数调用类函数

    我是 Angular 2 和 Observables 的新手 所以如果我的问题微不足道 我深表歉意 无论如何 我正在尝试使用 RxJS 测试 Angular 2 HTTP 客户端 虽然我让它工作了 但我需要向我当前正在处理的服务添加更多逻辑
  • 在 ionic 中从 Base64 打开 pdf

    因此 我将 Jasper 报告转换为 pdf 然后在 REST 控制器中转换为 base64 我该如何将其传输到我的 ionic 3 应用程序 我研究了 Ionic Native Document Viewer 但为了做到这一点 我需要将文
  • Angular2 - 在 SystemJS 中导入第 3 方 javascript

    由于某种原因 fileSaver 没有被映射 angular2 jwt 工作正常 I did npm install file saver save获取文件保护程序 然后按如下方式引用它 我有一个 gulp 任务将 js 文件移动到 lib
  • 指令中的 Angular2 样式

    在属性指令 即添加外观 行为的指令 的给定示例中 我们在宿主元素上对样式进行了相当简单的设置 import Directive ElementRef from angular2 core Directive selector myHighl
  • 在 Angular 2 中进行并行调用 http get 或 post 调用

    如何在 Angular 2 中进行并行调用 HTTP get 或 post 调用 我有 2 个服务电话 其中一个愈伤组织的响应必须拨打另一个电话 有人可以建议我如何通过错误处理场景进行这些并行调用吗 如果您的服务是Observable基于而
  • Angular cli - 在“deployUrl”选项被弃用后在 webpack 中设置“publicPath”

    我希望在这里得到更多答案 开放问题角度 cli https github com angular angular cli issues 22113以及 从角度 13 开始 它说deployUrl正在被弃用 在我们的项目中 我们定义deplo
  • 无法分配给对象“#”的只读属性“detachedCallback”

    我安装了A Frame https github com aframevr aframe by npm install aframe save 当我使用时 import aframe or use require aframe import
  • Angular2排序数组用于在html中的*ngFor中显示

    我正在循环浏览所有帖子 li 当显示每个帖子的日期时 我会执行以下操作 post date date yyyy MM dd HH mm ss 我想要做的是按最新的第一个顺序显示所有帖子 我尝试过使用类似的管道 li li import Pi
  • 找不到模块“@angular/platform-b​​rowser/animations”

    我收到错误 ts 找不到模块 angular platform b rowser animations 我已经安装了以下内容 npm install save Angular Material Angular cdk npm install
  • Angular 4在下一行显示p标签的换行符

    我有一个 Angular 4 页面 我必须在其中显示用户评论列表 用户可以多行输入评论 我想在多行中绑定文本 我想显示以 n在新行中 我努力了 p p p comment text p 我不想更换 n with br 标签 我想要别的东西
  • gyp ERR,Npm 无法获取本地颁发者证书

    我正在致力于 Windows 10 的全新安装 唯一的事情是我安装了 cygwin 以在 cmd 中获取 unix 命令 当我打字时npm install g angular cli它下载了必要的文件 但我收到错误 gyp ERR conf
  • 两个服务如何以双向方式相互通信?

    一种是通过事件 另一种是通过调用方法 我试图在我的应用程序中实现聚合模式 我有 AuthService 在这里我处理身份验证结果并发出事件 if auth this eAuth emit true else this eAuth emit
  • 如何等待,直到我从 Angular 7 中的后端 Spring Boot API 得到响应

    我想使用 http post 方法的结果从一条路线导航到另一条路线 但导航是在没有 http post 响应的情况下发生的 当我调试代码时 响应越来越晚 我怎样才能解决这个问题 有什么办法可以等待执行直到后端返回响应吗 当我单击按钮时 将执
  • Angular 2 路由器使用 Observable 进行解析

    Angular 2 RC 5 发布后引入了路由器解析 Here https angular io docs ts latest guide router html resolve guard使用 Promise 演示了示例 如果我使用 Ob
  • 测试 - 存根服务方法未定义

    我已经在非常简单的代码上编写了一个非常简单的测试 但由于某种原因存根服务方法未定义 当我使用 Jasmine Spy 时 它可以工作 但对于这样一个简单的任务 有人可以解释一下为什么会发生这种情况吗 我删除了 import 语句只是为了减少
  • Angular service-worker范围在安装过程中遇到错误

    我正在尝试使用 Angular Service Worker 但在尝试使用它时出现错误 这些是我的版本 Angular CLI 15 2 0 Node 16 18 1 Package Manager npm 8 19 2 OS linux
  • 如何在 ngrx/effects 中执行 if/else 操作?

    我正在使用 ngrx effects 我想根据以下情况分派不同的操作foo商店里的状态 这就是我现在正在做的 Effect foo1 this updates whenAction Actions FOO filter obj gt obj
  • 跨延迟加载路由创建共享模块

    我正在构建一个 Angular 11 应用程序并尝试创建一个SharedModule 我正在使用延迟加载 并希望避免在延迟加载的路由中多次加载公共模块 我创建了一个共享模块并将其导入到我的AppModule 根据我的理解 这个共享模块应该在

随机推荐