Angular基础

一：声明属性的几种方式

1. public  公有 （默认） 可以在这个类中使用，也可以在在类外使用
2. protected  保护类型   只有在当前类和他的子类里可以访问
3. private  私有               只有在当前类才可以访问这个属性

二：绑定属性;

[属性值] = ‘变量’

 

三：循环列表--展示索引(index)

<ul>
    <li *ngFor="let item if list; let key=index">
        {{key}}---{{item}}
    </li>
</ul>

 四：条件判断

        1:ngif

<div *ngIf="launchData">
    {{true}}

</div>
<div *ngIf="!launchData">
    {{false}}

</div>

        2:ngif  else

 <ul>
     <li *ngFor="let apm of data.traceParse">
        <ng-container *ngIf="apm.url==='' else apmAUlr">
         <span>{{apm.key}}：{{apm.value}}</span>
        </ng-container>
        <ng-template #apmAUlr>
           <a href="{{apm.url}}" target="_blank">{{apm.key}}：{{apm.value}}</a>
         </ng-template>
    </li>
</ul>

3.ngSwitch

 五：样式绑定

ngClass

<div [ngClass]= "{'red':true}">
    红色样式
</div>

<div [ngClass]= "{'red':flag,'green':!flag}">
    根据变量来展示不同的样式
</div>

ngStyle

publice attr:String='red'

<div [ngStyle]= "{'color':'red'}">
    固定样式
</div>

<div [ngStyle]= "{'color':attr}">
    固定样式
</div>