好运满兜 發表於 2019-5-20 15:31:00

angular 中*ngIf 和*ngSwitch判断语句

<div class="cnblogs_code">
<pre>&lt;div style="text-align:center"&gt;
&lt;h1&gt;<span style="color: rgba(0, 0, 0, 1)">
    Welcome to {{ title }}</span>!
&lt;/h1&gt;
&lt;p *ngIf="true"&gt;show&lt;/p&gt;
&lt;p *ngIf="isShow"&gt;hide&lt;/p&gt;
&lt;p template="ngIf true"&gt;这是 ngIF 判断是否显示&lt;/p&gt;

&lt;ul ="status"&gt;
    &lt;li *ngSwitchCase="1"&gt;已支付&lt;/li&gt;
    &lt;li *ngSwitchCase="2"&gt;订单已经确认&lt;/li&gt;
    &lt;li *ngSwitchCase="3"&gt;已发货&lt;/li&gt;
    &lt;li *ngSwitchDefault&gt;无效&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;</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]
查看完整版本: angular 中*ngIf 和*ngSwitch判断语句