angular8里面的*ngSwitch

最新推荐文章于 2022-07-25 00:21:44 发布
最新推荐文章于 2022-07-25 00:21:44 发布
阅读量2k 收藏
点赞数 1
分类专栏： angular8 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41875025/article/details/107436488
版权
本文详细介绍了在Angular8中如何使用*ngSwitch进行条件渲染，通过定义一个枚举类型`orderStatus`来区分不同的订单状态，并在HTML模板中应用*ngSwitch指令，实现了根据订单状态显示不同的信息，例如当状态为1时，显示'已支付'。
摘要由CSDN通过智能技术生成

ts文件：
定义一个类型：orderStatus

pubulc orderStatus:number = 1

// 1表示已经支付 2 表示支付成功 3 表示已经发货 4 表示已经收获货 5 表示无效

html文件：

<span [*ngSwitch]="orderStatus"></span>
<p *ngSwitchCase="1">
	表示已支付
</p>
<p *ngSwitchCase
最低0.47元/天 解锁文章
古兔bug
关注
专栏目录
Angular ngIf ngSwitch ngForOf
yanyi24的博客
01-20 1266
ngIf、ngSwitch、ngForOf 这一节，我们将介绍angular内置指令：ngIf、ngSwitch、ngForOf。这也是日常开发中经常会遇到的常见指令。原文阅读 ngIf ngIf是内置的结构型指令，控制宿主元素的添加或删除，取决于绑定的值是否为真。（跟vue的v-if是类似的，不是控制display属性） 单独使用ngIf import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app
ng-switch
qq_31361663的博客
05-31 303
ngSwitch指令包含ng-switch on、ng-switch-when、ng-switch-default功能类似switch，ng-switch on指要判断的值，ng-switch-when指条件条件符合将显示这个dom元素， ng-switch-default指条件都不符合默认显示的元素。 ng-switch="expression"> ng-switch-
ng-switch指令
一笑的博客
02-21 683
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-switch指令</title> </head> <body ng-app> <select ng-model="selected"> <option value
ng命令——ngSwitch，ngSwitchCase，ngSwitchDefault简单理解
热门推荐
虑而后能得
09-09 1万+
因为项目的问题，所以我要用到angular的ng命令，但是发现自己不是很懂，就查了查，发现，emmmm，还不是很懂，后来看着代码，又结合官方的话，别人的回答，大概理解了一点，下面把我的理解整理整理，否则就更不容易懂了 下面是angular官方回答，但是我还是不懂： angular-ngSwitch理解 ngSwitch:根据内嵌的 match（匹配）表达式（match_express_*）与...
angular6基本语法 *ngFor *ngIf 获取dom元素 绑定事件
盼盼盼的博客
03-20 2372
1.创建组件 创建组件 //创建一个header组件 ng generate component header （简写 ng g c header） //创建自定义服务service ng generate service header (简写 ng g s header) //创建路由 ng generate module app-routing --flat --module=app 使...
angular8入门
jenniferzgh的博客
10-07 1180
一：开发环境准备 下载安装angular Node.js,webpack,脚手架搭建 查看node版本:node –v Angular8只支持node10以上版本 查看npm版本：npm –v 删除已安装的旧版本的angular：cnpm uninstall –g @angular/cli 删除angular安装包 清除缓存：npm cache clean --force 全局安...
ngfor ngif（ngif then else） ngswitch + ngfor里面使用ngif 和 ngswitch
weixin_41147129的博客
10-28 1182
<div *ngIf="col.field=='useSubsidy'; then thenBlock else elseBlock " ></div> <ng-template #thenBlock> {{carData.useSubsidy|USE_SUBSIDY_PIP}} </ng-template> <ng-template...
angular 基础
rosies的博客
05-27 433
angular基础学习 一、angular属性声明 public，（默认）在类，子类，以及类外都可以使用 protected，只能在类及其子类中使用 private，只能在当前类中使用 改变属性的值：在constructor中改变属性的值例如 public name:string = "杨超越" constructor() { this.name = "ycy" }//这样就改变了属性name的值 绑定属性：在html文件中，对标签中增加动态的绑定 <div [title
Angular8 *NgIf,*NgFor,*NgSwitch,NgStyle,NgClass用法
lvxinaidou的博客
06-11 1831
Angular8内置指令使用一、ngFor二、ngIf三、ngSwitch四、 ngStyle五、ngClass 一、ngFor 二、ngIf 三、ngSwitch 四、 ngStyle 五、ngClass
Angular之ngSwitch踩坑
03-19 2471
当要根据某个表达式的值的不同展示不同的页面效果时，Angular提供了一个类似switch_case 语句的模板语法： <container-element [ngSwitch]="switch_expression"> <some-element *ngSwitchCase="match_expression_1">...</some-element&gt...
angular学习-*ngFor,*ngIf,*ngSwitch
xiayngbaidu12345的博客
07-25 622
angular学习-*ngFor,*ngIf,*ngSwitch
Angular中ng-switch指令的用法
chisui5037的博客
09-10 337
用法如代码所示，实现了一个最基本的类似于tab页的切换效果： <htmlng-app> <head> <style> ul,li{ list-style:none; float:left; } li{ ...
angular 指令渲染_【Angular】内置指令ngIf和ngSwitch
weixin_39963819的博客
12-20 348
ngIf判断表达式指令，如果表达式的结果返回的是一个假值，那么元素会从DOM上被移除。示例：<p*ngIf="true">showp><p*ngIf="isShow">hidep><ptemplate="ngIf true">这是 ngIF 判断是否显示p>ngSwitch根据一个给定的条件来渲染不同的元素，可以使用ngSw...
angular7 ngswitch语法
weixin_42716945的博客
09-07 865
<span [ngSwitch]=""> <p *ngSwitchCase="true"> </p> <p *ngSwitchCase="false"> </p> <p *ngSwitchDefault> 默认展示 </p> </span>
angular简易switch选择按钮
cf8833的博客
03-29 1176
angular简易switch选择按钮 step1: D:\vue\untitled2905\src\app\app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppCompone
Angular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitch
qq_39962271的博客
02-08 2466
Angular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitch 首先，进行Angular环境的搭建和项目创建 ctrl + c 结束服务 1、新建模块 ng g component components/home 如图： 2、将home模块添加到主页 app.component.html，页面代码如下，没有看错，只有一行 <app-home></app-home> 3、Angular数据循环 *ngFor 1）home.component.ts中
Angular入门学习笔记
K One
07-10 1万+
Angular学习笔记，Angualr安装，Angular入门，Angular实战,ANgualr路由守卫
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值