第四章 内置命令

内置命令

[(ngModel)]=“value”

• 在app.module.ts中引入

// 1. 在app.module.ts中引入 
import { FormsModule } from '@angular/forms'
@NgModule({
  declarations: [
   //...
  ],
  imports: [
  //...
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
// 2. 在模板中定义
<input [(ngModel)]="cvalue">
// 3. 在ts文件中定义变量
cvalue:string;

*ngif=“表达式”

 <span> *ngif = "表达式"</span>
  <div *ngIf="true">
    hi, I'm true
  </div>
  <div *ngIf="5>2">
    hi, I'm  5>2
  </div>
  <div *ngIf="myFunc()">
    hi, I'm  myFunc()
  </div>

[ngSwitch] =“表达式”

<span> [ngSwitch] ="表达式"</span>
  <div>
    <input [(ngModel)]="swvalue">
  </div>
  <span [ngSwitch]="swvalue">
    <p *ngSwitchCase="1">
      I'm  switch 1
    </p>
    <p *ngSwitchCase="2">
      I'm  switch 2
    </p>
    <p *ngSwitchDefault>
      I'm  switch default
    </p>
  </span>

[style.<cssproperty >]=“value” or [ngStyle]="{color: value}"

<div>
  <div>
    <span>color: </span><input [(ngModel)]="cvalue">
  </div>
  <div [style.background-color]="cvalue">
    ngstyle  color: {{ cvalue }}
  </div>

  <div>
    <span>font-size: </span><input [(ngModel)]="fsize"> px
  </div>
  <div  [ngStyle]="{color: cvalue}" [style.font-size.px]="fsize">
    ngstyle  color: {{ cvalue }}
  </div>

</div>

[ngClass]="{classname: boolean}" or [ngClass]="{classname: value}"

<div>
  <!-- 第一种方式是传入一个对象字面量。以类名作为键，而值应该是
一个用来表明是否应该应用该类的真/假值 -->
  <!-- <span> [ngClass] = "{'class': true} </span> -->
  <div [ngClass]="{bordered: false}">This is never bordered</div>
  <div [ngClass]="{bordered: true}">This is always bordered</div>
  <!-- 动态使用： 我们添加了一个变量作为对象的值-->
  <div [ngClass]="{bordered: isbored}">isbordered: {{ isbored}} </div>
</div>

.bordered {
    border: 1px dashed black;
    background-color: #eee;
}

*ngFor=“let item of items; let i=index”

<div>  
  <div *ngFor="let item of items; let i=index">
    {{i}} : {{item}}
  </div>
</div>

ngNonBindable 【不要编译或者绑定页面中的某个特殊部分】

<div>
  <span> ngNonBindable  </span>
  
  <div ngNonBindable>
    {{i}} is  {{item}}
  </div>

</div>

{{i}} is {{item}}