[Angular] Angular ngSwitch Core Directive In Detail

最新推荐文章于 2020-10-17 20:54:24 发布
最新推荐文章于 2020-10-17 20:54:24 发布
阅读量82 收藏
点赞数
文章标签： javascript ViewUI
本文介绍如何在Angular中使用ngSwitch指令来根据课程类别条件性地显示不同的组件。通过具体的代码示例，展示了如何针对不同的课程级别（初学者、中级、高级）展示相应的类别标签。

When want to display different component based on some conditions:

<div class='course-category' [ngSwitch]="course.category">
    <div class="category" *ngSwitchCase="'BEGINNER'">Beginner</div>
    <div class="category" *ngSwitchCase="'INTERMEDIATE'">Intermediate</div>
    <div class="category" *ngSwitchCase="'ADVANCE'">Advance</div>
    <div class="category" *ngSwitchDefault="'BEGINNER'">All levels</div>
</div>

　　

12、Angular 动态模板切换与服务管理
i7j8k9l的博客
08-16 15
本文探讨了 Angular 中动态模板切换与服务管理的核心概念及实现方式。首先介绍了如何通过自定义结构型指令实现基于用户角色的模板动态切换，然后深入讲解了 Angular 的依赖注入机制及服务管理的最佳实践。此外，还涵盖了实际开发中需考虑的性能优化、安全性及代码可维护性等关键因素，并展望了 Angular 未来的发展趋势。通过本文，开发者可以掌握构建高效、安全、可维护的 Angular 应用的核心技能。
angular“英雄指南”(一)--No provider for HeroService!
kikyou_csdn的博客
06-21 5702
报错—–No provider for HeroService! “英雄指南”进行到教程-6服务时的报错 定义providedIn 元数据的值是 ‘root’时： 运行时 解决： 还不知道原因，原本以为和“No provider for HeroService”有关 在app.module.ts中(只需定义在providers中)： import { Hero...
【Angular】Angular+Ionic报错：No provider for *Service!
热门推荐
陶洲川的博客
09-21 1万+
1.报错信息：ERROR Error: Uncaught (in promise): Error: No provider for TrainService! Error: No provider for TrainService!第二个信息： 2.解决方案：去报错信息中提到的TrainService.ts文件中，添加provider；具体如下：3.源代码：在service文件中providers
Angular6错误 Service: No provider for Renderer2
weixin_34334744的博客
02-27 435
这个错误一般是在构造函数中 注入 Renderer2 引起的。 解决办法很简单，既然无法注入Renderer2就不注入。可以利用工厂类RendererFactory2 代替直接注入Renderer2的方式。示例代码如下： import { Renderer2, RendererFactory2 } from '@angular/core'...
ng-switch指令
一笑的博客
02-21 738
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-switch指令</title> </head> <body ng-app> <select ng-model="selected"> <option value
Angular2入门--架构总览
08-30
import { Component, Input } from '@angular/core'; import { Hero } from './hero'; @Component({ selector: 'my-hero-detail', template: ` *ngIf="hero"> <h2>{{hero.name}} details! <div><label>id: ...
构建Angular9与ASP.NET Core 3.1的付款细节应用
- payment_detail_angular9_webapi-master: 表示这个项目存放在一个名为payment_detail_angular9_webapi-master的压缩包中，通常这是一个包含源代码和必要文件的master分支压缩包。 从以上信息可以看出，该资源是一...
Angular 8 从基础到项目实战 完整的Angular学习路径
愿你走过半生，归来任是少年。
10-17 1859
注意nodejs版本、以及angular-cli版本 ng --version 查看是否安装成功 ng new taskAngular 生成项目cli 目录结构介绍 src/app ==项目开发的主要目录== src/assets ==项目静态文件== src/environments ==项目的环境变量== src/main.ts ==项目的根文件== src/polyfills.ts ==设置动画后处理js对各浏览器厂商的兼容性== src/styles.scss ==全局
"No provider for smtp"错误的处理
竹君子之家
06-21 1万+
使用javamail常见的一个出错信息:javax.mail.NoSuchProviderException: No provider for smtp原因就很可能如下:在不同的加载jar的目录下放置了不同版本的mail.jar,比如一个是javamail1.3.1的mail.jar在D:/tomcat_4.1/common/lib下,而另外一个是javamail1.2的mail.jar在D:/t
Angular学习笔记（一）
WiciaoZheng的博客
12-15 411
Angular学习笔记
Angular执行测试报错: NullInjectorError: No provider for HttpClient!
我的开发博客(公众号:Web后端技术)
12-06 6512
Angular执行测试报错: NullInjectorError: No provider for HttpClient! 报错内容 使用 ng serve 运行应用，通过访问 http://localhost:4200，运行正常，未见报错。 但是，执行 ng test 测试就报错，错误内容如下： // HeroeSearchComponent Chrome 72.0.3622 (Mac OS X...
Angular 使用笔记【依赖注入(有例子)】【constructor & ongOnInit】 【组件传值】【ngSwitch】
Lakeson
07-05 1198
1. constructor用法： constructor应该是ES6中明确使用constructor来表示构造函数的，构造函数使用在class中，用来做初始化和给属性赋值操作。当包含constructor的类被实例化时，构造函数将被调用。 constructor也有其用武之地，其主要作用是注入依赖。在constructor中注入的依赖，就可以作为类的属性被使用了。 construc...
Angular8 *NgIf,*NgFor,*NgSwitch,NgStyle,NgClass用法
lvxinaidou的博客
06-11 1952
Angular8内置指令使用一、ngFor二、ngIf三、ngSwitch四、 ngStyle五、ngClass 一、ngFor 二、ngIf 三、ngSwitch 四、 ngStyle 五、ngClass
angular NullInjectorError: No provider for Http!
PT1993的博客
06-18 5551
添加app.module.ts这个import { HttpModule } from '@angular/http';
ionic中的ion-input报错No provider for NgControl！ 解决方法
Function0927的博客
06-12 1064
问题：用ion-input报错显示NGControl，而且限制了ion-item的高度！ 如图在ionic项目中运用了ion-input 如图结果ion-list中的高度限制了，而且报错NGControl 解决办法:原因是在创建的时候没有选择好要用的angular框架从而发生找不到NGControl，所以官方提供的命令行容易出错，所以用ionic start 项目名 来进行手动的选择angular框架来解决这个错误；如图： 在当前文件创建项目： 完成项目创建后，在来使用ion-input，显示结果如
《Angular之no provider for ConnectionBackend》
杨晓风 迷迭香的记忆
11-04 372
前言:        the best way out is always through. 正文:    问题场景    问题定位         拦截器相关配置不对        出现原因之一:根组件已配置拦截器相关配置,在组件引用时,又重新provider一遍,导致出现这个问题     解决方案        将组件中ts文件中:        @Compo...
Angular深度解析：指令Directive全面指南
"Angular指令Directive详解，包括指令的基本概念、作用，以及自定义指令的模式匹配restrict的使用示例。" 在Angular中，指令是扩展HTML的一种方式，它们为HTML提供了额外的功能，使得开发者可以通过声明式的方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值