zoukankan      html  css  js  c++  java
  • Built-in Components

    NgIF

    1 <div *ngIf="false"></div> <!-- never displayed -->
    2 <div *ngIf="a > b"></div> <!-- displayed if a is more than b -->
    3 <div *ngIf="str == 'yes'"></div> <!-- displayed if str holds the string "yes" -->
    5 <div *ngIf="myFunc()"></div> <!-- displayed if myFunc returns a true value -->

    NgSwitch

    <div class="container" [ngSwitch]="myVar">
        <div *ngSwitchCase="'A'">Var is A</div>
        <div *ngSwitchCase="'B'">Var is B</div>
        <div *ngSwitchDefault>Var is something else</div>
    </div>

    NgStyle

    <div>
        <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
            red text
        </span>
    </div>

    NgClass

    <div [ngClass]="classesObj">
        Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }}
    </div>

    NgFor

    <h4 class="ui horizontal divider header">
        Simple list of strings
    </h4>
    
    <div class="ui list" *ngFor="let c of cities">
        <div class="item">{{ c }}</div>
    </div>

    Geting an index

    <div class="ui list" *ngFor="let c of cities; let num = index">
        <div class="item">{{ num+1 }} - {{ c }}</div>
    </div>

    NgNonBindable

    1 <div class='ngNonBindableDemo'>
    2     <span class="bordered">{{ content }}</span>
    3     <span class="pre" ngNonBindable>
    4          This is what {{ content }} rendered
    5     </span>
    6 </div>    

    -------------------------------------------------------------------------------
    Senior Software Engineer
  • 相关阅读:
    Elasticsearch 缓存总结
    ElasticSearch-集群
    HTTP协议详解
    HTTPS总结
    ElasticSearch--Document
    正排索引和倒排索引
    线上OOM排查步骤总结
    线程池-四种拒绝策略总结
    netty篇-练手
    netty篇-UDP广播
  • 原文地址:https://www.cnblogs.com/fangshiwei/p/6035096.html
Copyright © 2011-2022 走看看