首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用@ViewChildren获取*ngFor循环<md-option>元素失败

使用@ViewChildren获取*ngFor循环<md-option>元素失败可能是由于以下几个原因:

  1. 错误的选择器:@ViewChildren装饰器需要一个选择器来定位元素。确保选择器与<md-option>元素的标签名和类名匹配。例如,如果<md-option>元素具有类名为"option-class",则选择器应为".option-class"。
  2. 生命周期钩子的时机不正确:@ViewChildren装饰器只能在组件的生命周期钩子ngAfterViewInit之后使用。确保在ngAfterViewInit钩子函数中使用@ViewChildren装饰器。
  3. ngFor循环还未完成:如果ngFor循环还未完成,@ViewChildren可能无法正确获取到<md-option>元素。可以尝试在ngAfterViewInit钩子函数中使用setTimeout函数来延迟获取元素的操作,确保*ngFor循环已完成。
  4. 模板结构问题:检查模板结构,确保<md-option>元素位于正确的位置。如果<md-option>元素位于ngFor循环的内部,请确保@ViewChildren装饰器位于包含ngFor循环的元素上。
  5. Angular版本不兼容:某些Angular版本可能存在与@ViewChildren装饰器相关的问题。确保使用的Angular版本与@ViewChildren装饰器兼容,并尝试升级到最新版本。

对于解决这个问题,腾讯云提供了一系列的云原生产品和解决方案,可以帮助开发者构建可靠、高效的云计算应用。其中,腾讯云函数(SCF)是一种无服务器计算服务,可以帮助开发者在云端运行代码,无需关心服务器管理和运维。腾讯云函数支持多种编程语言,包括JavaScript、Python、Java等,可以用于处理前端开发、后端开发、人工智能等各种场景。您可以通过以下链接了解更多关于腾讯云函数的信息:

腾讯云函数产品介绍:https://cloud.tencent.com/product/scf

此外,腾讯云还提供了丰富的数据库服务,如云数据库MySQL、云数据库MongoDB等,可以满足不同应用场景下的数据存储需求。您可以通过以下链接了解更多关于腾讯云数据库的信息:

腾讯云数据库产品介绍:https://cloud.tencent.com/product/cdb

总结:要解决使用@ViewChildren获取*ngFor循环<md-option>元素失败的问题,需要检查选择器、生命周期钩子、模板结构等方面的问题,并可以考虑使用腾讯云函数和腾讯云数据库等相关产品来支持您的云计算应用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Appetite】ionic3实录(六)首页实现

image.png 观察之,发布者和内容的文本信息可以用ionic现有的组件实现,而视频播放和图片画廊(如果是轮播图可以用slides组件,它是阉割并封装过的swiper,好像现在这样的效果不能实现)需要使用第三方组件...技巧】ionic3视频播放》 四、安装swiper组件 npm install swiper --save 四、实现首页 打开home.ts文件,修改内容为: import { Component, ViewChildren..., private homeProvider: HomeProvider) { } ionViewDidLoad(){ this.getFriendNews(); } //获取数据...watchActiveIndex: true, initialSlide: 0,//初始化显示第几个 zoom: true,//双击,手势缩放 loop: false,//循环切换...initSwiper方法貌似要在页面渲染完成后才能使用,而getFriendNews获取数据后未必渲染完成,故不能马上调用,所以调用this.cd.detectChanges()来处理下,关于这个可以查看我另一篇文章

1.1K40
  • angular知识点梳理第二篇-基本语法

    -- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的,所以这里是比较容易理解的,简单的演示一下...-- 将list的索引值获取到赋值给i --> {{item.title}} - {{i}} -...:hidden是要区别开的,当if判断为false的时候,页面上是整个元素都消失了,而不是仅仅隐藏了css样式 在需要使用数据绑定的组件进行数据的处理 import { Component, OnInit...Ng-container ng-container 这里有必要介绍一下,这个类比的话就喝vue的template是基本一致的,不是完全一致,我们可以将它看作一个承载体,也就是说我们无法进行包裹判断的一些元素或者段落可以使用这个进行包裹...运行效果 如果这个tag标签不太理解的,你可以将它完全当作一个容器,当你需要对一段内容控制逻辑的时候但是不知道使用什么元素标签的时候就可以使用这个,在html的任何场景下都可以使用

    2.5K30

    Angular 显示英雄列表

    最终,你会从远端的数据服务器获取它。但是目前,你需要创建一些模拟英雄(some mock heroes),并假设这些数据是从远程服务器上获取的。... *ngFor 列出这些英雄 打开 HeroesComponent 的模板文件,并做如下修改: 在顶部添加  然后添加表示无序列表的 HTML 元素() 在  中插入一个 <li...它会为列表中的每项数据复写它的宿主元素。 在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...添加 click 事件绑定 再往  元素上插入一句点击事件的绑定代码: heroes.component.html <li *ngFor="let hero of heroes" (click)...你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

    4.4K70

    AngularDart 4.0 高级-结构指令 顶

    NgFor指令具有比本指南中显示的NgIf更多的功能,包括必需的和可选的。 至少NgFor需要一个循环变量(let hero)和一个列表(heroes)。...使用星号(*)前缀表示法将它们附加到元素。当NgSwitchCase的值与switch的值匹配时,会显示它的宿主元素。...打算在其他地方使用的p span样式无意中应用于此处。 另一个问题:一些HTML元素要求所有直系孩子属于特定类型。 例如,元素需要子元素。...您将通过TemplateRef获取内容并通过ViewContainerRef访问视图容器。 你在指令构造函数中注入这两个类作为类的私有变量。...在没有合适的宿主元素使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

    16.1K20

    Angular 显示英雄列表

    最终,你会从远端的数据服务器获取它。但是目前,你需要创建一些模拟英雄(some mock heroes),并假设这些数据是从远程服务器上获取的。... *ngFor 列出这些英雄 打开 HeroesComponent 的模板文件,并做如下修改: 在顶部添加  然后添加表示无序列表的 HTML 元素() 在  中插入一个 <li...它会为列表中的每项数据复写它的宿主元素。 在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...添加 click 事件绑定 再往  元素上插入一句点击事件的绑定代码: heroes.component.html <li *ngFor="let hero of heroes" (click)...你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

    4K30

    AngularDart4.0 英雄之旅-教程-04明细 顶

    Dynama'), new Hero(18, 'Dr IQ'), new Hero(19, 'Magma'), new Hero(20, 'Tornado') ]; 最终这个应用程序将从Web服务获取英雄列表...-- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件中的英雄列表绑定到模板,迭代它们,并单独显示它们。...它表示元素及其子元素构成一个主模板。 ngFor指令遍历组件的英雄列表并为该列表中的每个英雄呈现该模板的一个实例。...刷新浏览器,该应用程序不再失败,名称列表再次显示在浏览器中。 当没有选定的英雄时,ngIf指令从DOM中移除英雄详情HTML。 没有英雄细节元素或绑定担心。...您了解了如何在组件模板中使用核心指令ngIf和ngFor。 您在CSS文件中定义了样式,并使用它们来设置应用程序的样式。 你的应用应该看起来像这个实例(查看源代码)。

    3K30

    AngularDart4.0 指南- 模板语法二 顶

    NgFor:为列表中的每个项目重复一个模板。 NgSwitch:只显示多个可能元素中的一个。 NgIf  您可以通过向该元素应用NgIf指令(称为宿主元素)来添加或移除DOM中的元素。...下面是NgFor应用于的例子: {{hero.name}} 您也可以将NgFor应用于组件元素,如下例所示: <hero-detail...字符串“let hero of heroes”是指: 取英雄列表中的每个英雄,将其存储在本地英雄循环变量中,并使其可用于每次迭代的模板HTML。...* ngFor与index(索引) NgFor指令上下文的index属性返回每个迭代中项目的从零开始的索引。 您可以捕获模板输入变量中的index,并在模板中使用它。...在这里,如果currentHero为空,则防止视图呈现失败。 The current hero's name is {{currentHero?.

    30K20

    AngularDart 4.0 高级-生命周期钩子 顶

    SpyDirective可以使用ngOnInit和ngOnDestroy挂钩创建或销毁它探测的元素。...此示例将SpyDirective应用于由父SpyComponent管理的ngFor英雄迭代器中的。...刺探OnInit和OnDestroy 使用这两个间谍钩进行卧底探索,以发现元素何时被初始化或销毁。 这是指令的完美渗透工作。 英雄们永远不会知道他们正在被监视。...Angular团队负责人Misko Hevery解释了为什么您应该避免使用复杂的构造函数逻辑。 不要在组件构造函数中获取数据。您不应该担心当在测试下创建或决定显示之前时新组件会尝试联系远程服务器。...关键的区别在于子组件 AfterView钩子涉及ViewChildren,子组件的元素标签出现在组件的模板中。

    6.2K10

    Angular 从入坑到挖坑 - 组件食用指南

    通过使用 $event 作为方法的参数会将许多用不到的模板信息传递到组件中,导致我们在仅仅是为了获取数据的前提下,却需要对于页面元素十分了解,违背了模板(用户所能看到的)与组件(应用如何去处理用户数据)...因此,这里应该使用模板引用变量的方式获取数据信息。 模板引用变量是对模板中 DOM 元素的引用,提供了从模块中直接访问元素的能力。...,再次显示时不用重新进行初始化过程 NgFor:通过定义单条数据的显示格式,angular 以此为模板,循环渲染出所有的数据 <p *ngFor="let item of products; let...指令上下文中的 index 属性在每次迭代中,会获取到条数据的索引值 当渲染的数据发生改变时 4,会导致 dom 元素的重新渲染,此时可以采用 trackBy 的方式,通过在组件中添加一个方法,指定循环需要跟踪的属性值...安全导航运算符 在视图中使用的属性值为 null or undefined 时,javascript 和 angular 会引发空指针异常并中断视图的渲染过程, 从而视图会渲染失败,而使用了安全导航运算符

    15.8K30

    【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

    上一节提到几个问题,现在我们逐一来解释一下: 问题一:initSwiper方法为什么放在获取数据之后?它放在其它地方可以吗?...我们观察initSwiper方法,第一个参数'.wheel .swiper-container'其实是个选择器,所以它也是依托dom操作的,此外,由于我们使用了数据绑定,this.vm.dessertSlides...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到的swiper,它不是一个angular封装起来的组件,不会自动初始化,我们每次显示它时都需要显式调用一下...这并不是说都不要用*ngIf,因为当页面元素太多时会容易导致界面卡顿,所以没用的多余元素应该移除,此时就用它。一句话说就是根据情况合理选择显示控制方法。...是因为该组件在异步获取到数据this.vm.dessertSlides前已完成了初始化了,这样新数据其实没有应用到,为了处理这种情况,我们改造一下html,为ion-slides组件加上一段*ngIf=

    1.4K20

    Angular 快速学习笔记(1) -- 官方示例要点

    Angular 的复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....把它标记为一个 HeroService 的注入点 在ngOnInit 中调用service获取数据 a. 虽然构造函数也可以调用,但是我们需要让构造函数保持简单,只做初始化操作 b.....pipe( catchError(this.handleError('getHeroes', [])) ); } catchError() 操作符会拦截失败的...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular 的 AsyncPipe。

    3.6K00
    领券