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

NgSwitch -行为异常,‘NgSwitch没有提供程序’-获取异常

NgSwitch是Angular框架中的一个指令,用于根据表达式的值在一组元素之间进行切换。它可以根据不同的条件显示不同的内容。

关于行为异常的问题,'NgSwitch没有提供程序'是因为在使用NgSwitch指令时,没有正确配置相关的提供程序。要解决这个问题,需要确保在使用NgSwitch指令之前,已经正确导入了NgSwitchModule,并在相关的组件中进行了声明。

具体来说,需要在使用NgSwitch指令的组件的模块中导入NgSwitchModule,并将其添加到模块的imports数组中,如下所示:

代码语言:txt
复制
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgSwitchModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
    NgSwitchModule
  ],
  declarations: [YourComponent]
})
export class YourModule { }

在组件的模板中,可以使用NgSwitch指令来切换不同的内容。例如,可以根据一个变量的值来切换不同的视图:

代码语言:txt
复制
<div [ngSwitch]="variable">
  <div *ngSwitchCase="'value1'">内容1</div>
  <div *ngSwitchCase="'value2'">内容2</div>
  <div *ngSwitchDefault>默认内容</div>
</div>

在上面的代码中,variable是一个在组件中定义的变量,根据它的值,NgSwitch指令会显示不同的内容。*ngSwitchCase用于指定不同的条件,*ngSwitchDefault用于指定默认的条件。

关于推荐的腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,这里无法给出具体的推荐。但是,腾讯云作为一家知名的云计算服务提供商,提供了丰富的云计算产品和解决方案,可以根据具体需求进行选择和使用。可以通过访问腾讯云的官方网站,了解他们的产品和服务。

希望以上信息对你有帮助!如果还有其他问题,请随时提问。

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

相关·内容

AngularDart 4.0 高级-结构指令 顶

= null" >{{hero.name}} 没有方括号。 没有圆括号。 只要*ngIf设置为一个字符串。...这里有一个全功能的NgFor应用程序,它有三种写法: <div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById...分配给<em>NgSwitch</em>(hero.emotion)的阀值确定显示哪些阀(如果有)。 <em>NgSwitch</em>本身不是一个结构性指令。 它是一个属性指令,用于控制其他两个switch指令的<em>行为</em>。...您将通过TemplateRef<em>获取</em>内容并通过ViewContainerRef访问视图容器。 你在指令构造函数中注入这两个类作为类的私有变量。...在<em>没有</em>合适的宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和<em>NgSwitch</em>内置指令如何工作。

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

    以下示例显示如何使用class绑定来添加和删除应用程序的“special”类。 以下是如何设置没有绑定的属性: <!...没有trackBy,这两个按钮都会触发完整的DOM元素替换。 有了trackBy,只有更改id触发器元素替换。 ? NgSwitch指令 NgSwitch就像Dart switch语句。...如果您尝试设置*ngSwitch,则会出现错误,因为NgSwitch是一个属性指令,而不是结构指令。 它改变了其同伴指令的行为。 它不直接操作DOM。...The title is {{title}} 视图仍然呈现,但显示的值是空白的; 你只看到“The title is”没有任何东西。 这是合理的行为。 至少该应用程序不会崩溃。...如果hero属性不能为空,这将是合理的行为。 如果它永远不能为空,但它是空的,这是一个应该被捕获和修复的编程错误。 抛出异常是正确的。

    30K20

    99%的程序没有考虑的网络异常

    绝大多数程序只考虑了接口正常工作的场景,而用户在使用我们的产品时遇到的各类异常,全都丢在看似 ok 的 try catch 中。...如果没有做好异常的兼容和兜底处理,会极大的影响用户体验,严重的还会带来安全和资损风险。 接口异常,通常可以分为以下三类: CGI 逻辑出错。如调用方入参缺失类业务逻辑报错; 服务不稳定。...如,网络不稳定、网速慢、运营商劫持等 那么,我们在写代码时,如何快速的模拟这些接口异常,做好程序的兼容处理呢?...1、业务逻辑异常处理 例如 CGI 没有返回 data 字段,而是返回了一个错误码 code 和对应的 message,针对这种业务逻辑异常我们只需在第二个 then 中做好 code 值的判断即可(注意...近来微信小程序开发非常火,小程序原生提供的 wx.request API 能用于发送 HTTPS 请求,请在它的基础之上进行封装,支持 promise 调用和 timeout 超时时间定义(小程序默认的请求超时定义在

    1.6K80

    过渡到 Angular 17 的新控制流语法

    最近将我们当前项目的一些模板迁移到Angular 17的新控制流语法后,我觉得分享一些见解能够帮助一些人顺利过渡到这种新语法,为每个控制流结构提供清晰和明确的示例。所以,让我们开始吧。...指令 vs @switch控制块Before(传统 ngSwitch): Admin...loadExpensiveComponent) { }请确保查看《可推迟视图》文档,了解有关 @defer 块及其提供的触发条件如何使用的更多信息...向后兼容性和性能Angular 17允许您在应用程序中同时使用新旧语法。就性能而言,值得一提的是,Angular团队观察到使用新语法时达到了高达90%的速度性能改进。...结论Angular 17引入的新控制流语法在处理Angular应用程序中的模板和渲染逻辑方面带来了显著的改进。转换到这种新语法,承诺会使我们的代码更易读、易维护和高性能。

    67320

    99%的程序没有考虑的网络异常?使用Fundebug.notify()主动上报

    近日看到一篇文章99%的程序没有考虑的网络异常,开篇提到: 绝大多数程序只考虑了接口正常工作的场景,而用户在使用我们的产品时遇到的各类异常,全都丢在看似 ok 的 try catch 中。...如果没有做好异常的兼容和兜底处理,会极大的影响用户体验,严重的还会带来安全和资损风险。 于是,笔者分析了 GitHub 上的一些开源微信小程序,发现大多数的代码异常处理确实是不够的。...util.getData(index_api).then(function(data) { //this.setData({ // //}); console.log(data); }); 考虑了异常情况但是没有做妥善的处理...为了确保完全掌握小程序的运行状况,我们将异常上报。...Fundebug 的微信小程序插件除了可以自动捕获异常外,还支持通过API 接口主动上报异常

    46340

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

    -- 当没有 NgModel 时,双向数据绑定等同于下面的写法 --> <input type="text" id="userName" [value]="name" (input)="name...因此,这里应该使用模板引用变量的方式<em>获取</em>数据信息。 模板引用变量是对模板中 DOM 元素的引用,<em>提供</em>了从模块中直接访问元素的能力。...:{{refMsg}} 4.2、指令 4.2.1、属性型指令 属性型指令被应用在视图 dom 元素上,用来改变 dom 元素的外观或<em>行为</em> NgClass:用来设置元素的多个 css 类属性,如果只设置一个...<em>NgSwitch</em>:根据条件切换,从候选的几个元素中选择匹配的,放到 dom 元素中 请选择配置 <option value...安全导航运算符 在视图中使用的属性值为 null or undefined 时,javascript 和 angular 会引发空指针<em>异常</em>并中断视图的渲染过程, 从而视图会渲染失败,而使用了安全导航运算符

    15.8K30

    Angular2 之 结构型指令几个概念

    属性型指令 属性型指令会修改元素的外观或者行为。 e.g. NgStyle可以修改元素的好几个样式。 结构型指令 结构型指令通过添加和删除 DOM 元素来改变DOM的布局。... 我们经常看到的内置的结构型指令有:ngIf、ngSwitch、ngFor。 下面我们着重介绍ngIf。 NgIf案例分析 该指令接受一个布尔值,并据此让一整块DOM树出现或者消失。...隐藏元素的利弊 当我们隐藏元素时,组件的行为还在继续。 它仍然附加子啊它所属于的DOM元素上,它仍然在监听事件。angular会继续检查哪些能影响数据绑定的变更。...这只是它的默认行为。 自定义指令 我们自顶一个类似ngIf的指令。...import { TemplateRef, ViewContainerRef } from '@angular/core'; /** 选中器[],是匹配页面上的指令,可以有多个名称,由于是自己的指令,所以没有使用

    3K20

    ng-content 中隐藏的内容

    如果 ng-content 上没有设置 select 属性,它将接收全部内容,或接收不匹配任何其他 ng-content 元素的内容。...有时你只需要将其包装在额外的容器中即可应用 ngIf 或 ngSwitch。无论什么原因,通常情况下,你的内部组件不是包装器的直接子节点。...Time to poke and prod 我们从一个简单的实验开始:将两个 块放在我们的模板中,没有选择器。会出现什么情况?...这种行为有两个原因:期望一致性和性能。什么 “期望的一致性” 意味着作为开发人员,可以基于应用程序的代码,猜测其行为。...因为 ng-content 只是移动元素,所以可以在编译时完成,而不是在运行时,这大大减少了实际应用程序的工作量。

    2.7K30

    AngularJS应用页面切换优化方案

    前言 AngularJS被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验。...这是因为PhoneDetailCtrl的代码是在页面跳转发生后才执行的,而此时手机信息数据还没有从服务器获取到,也就是说$scope.phone这个model还未被赋值。...有没有一种办法让这些数据在切换到这个页面之前就先准备好呢? 答案当然是有,也就是这篇文章要介绍的主角——resolve。...$routeParams是获取不到任何值的。...AngularJS对一些常用的指令比如ngRepeat、ngSwitch以及ngView都有动画的支持。 AngularJS通过CSS来定义动画,要实现DOM元素的动画效果非常简单。

    1.9K100

    Angular学习笔记(一)

    @Component 里面的元数据会告诉 Angular 从哪里获取你为组件指定的主要的构建块。...providers - 组件所需服务的依赖注入提供商数组。 数据绑定 Angular 支持数据绑定,一种让模板的各部分与组件的各部分相互合作的机制。...当 Angular 渲染它们时,它会根据指令提供的操作对 DOM 进行转换。 服务 服务是一个广义范畴,包括:值、函数,或应用所需的特性。 依赖注入 大多数依赖都是服务。...Angular 使用依赖注入来提供新组件以及组件所需的服务。 2. 模板与数据绑定 绑定的类型可以根据数据流的方向分成三类: 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。...- 添加或移除一组CSS类 NgStyle - 添加或移除一组CSS样式 NgModel - 双向绑定到HTML表单元素 内置结构型指令 NgIf - 根据条件把一个元素添加到DOM中或从DOM移除 NgSwitch

    3.3K20

    浅谈Angular

    属性绑定 (a.html属性绑定 表示的是当前值 b.dom属性绑定 表示的是初始值 大部分属性都是一一对应的,既有DOM属性,也有HTML属性 但有一小部分属性,只有HTML属性没有...DOM属性 就算DOM属性和HTML属性名字一样,那也不是同一个东西) 3.事件绑定 ()--如果想要获取事件对象,传入$event 例:<button (click)="doClick...ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构中移除 *ngFor--动态创建DOM结构 <em>ngSwitch</em>--通过匹配case...来控制元素的显隐 在自定义指令里<em>获取</em>指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收从外部传入的值,需要使用@Input装饰器\....遇到的问题:数据不会及时更新,原因:组件的ngOnInit方法只会在其被创建时走一次,如果该组件不销毁,init方法不会再走,导致当前数据无法更新 解决办法: 使用RxJS解决,RxJS<em>提供</em>响应式开发

    4.4K10

    angular入门教程_初学者织围巾简单教程慢动作

    相反,一旦你写熟练了之后,TypeScript 可以非常有效地提升编码效率和程序可读性。...模板字符串一般只会在第一次被调用的时候编译一次,Handlebars 会把编译好的函数缓存起来,后面再次调用的时候会从缓存里面获取,而不会多次进行“编译”。...关于 Mustache 语法,你需要掌握3点: 它可以获取到组件里面定义的属性值。 它可以自动计算简单的数学表达式,例如:加减乘除、取模。 它可以获得方法的返回值。...在模板里面使用结构型指令 Angular 有3个内置的结构型指令:*ngIf、*ngFor、ngSwitchngSwitch 的语法比较啰嗦,使用频率小一些。...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/179594.html原文链接:https://javaforall.cn

    3.3K20

    AngularDart4.0 指南-体系结构概述 顶

    @Component中的元数据告诉Angular从哪里获取为组件指定的主要构建块。 模板,元数据和组件一起描述一个视图。 以类似的方式应用其他元数据注解以指导Angular行为。...例子包括: 日志服务 数据服务 消息总线 税计算器 应用配置 Angular中没有特别指定服务。 Angular没有定义服务。 没有服务基础类,没有地方注册服务。...如果注射器没有HeroService,它如何知道如何制作一个? 简而言之,您必须事先在注入器中注册HeroService的提供者。 提供者是可以创建或返回服务的东西,通常是服务类本身。...无论应用程序组件树中的级别如何,您都可以在引导期间或组件中注册提供程序。...通过组件提供的服务与应用程序组件树中的所有组件的后代共享。 引导时注册提供程序的情况非常少见。 有关详细信息,请参阅依赖注入页面的配置注入部分。

    7.9K30
    领券