angular 中*ngIf 和*ngSwitch判断语句
<div class="cnblogs_code"><pre><div style="text-align:center">
<h1><span style="color: rgba(0, 0, 0, 1)">
Welcome to {{ title }}</span>!
</h1>
<p *ngIf="true">show</p>
<p *ngIf="isShow">hide</p>
<p template="ngIf true">这是 ngIF 判断是否显示</p>
<ul ="status">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">订单已经确认</li>
<li *ngSwitchCase="3">已发货</li>
<li *ngSwitchDefault>无效</li>
</ul>
</div></pre>
</div>
<div class="cnblogs_code">
<pre>import { Component } from '@angular/core'<span style="color: rgba(0, 0, 0, 1)">;
@Component({
selector: </span>'app-root'<span style="color: rgba(0, 0, 0, 1)">,
templateUrl: </span>'./app.component.html'<span style="color: rgba(0, 0, 0, 1)">,
styleUrls: [</span>'./app.component.scss'<span style="color: rgba(0, 0, 0, 1)">]
})
export class AppComponent {
title </span>= 'angulardemo'<span style="color: rgba(0, 0, 0, 1)">;
status</span>='2'<span style="color: rgba(0, 0, 0, 1)">;
isShow</span>=<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">;
}</span></pre>
</div>
<p>效果:</p>
<p><img src="https://img2018.cnblogs.com/blog/1100100/201905/1100100-20190520153033203-1706701302.png" alt=""></p>
</div>
<div id="MySignature" role="contentinfo">
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!<br><br>
来源:https://www.cnblogs.com/loaderman/p/10894423.html
頁:
[1]