angular 基础1

1. ngIf

  <div *ngIf="flag" id="11"> ngif1</div>

2. ngFor

    <div *ngFor="let item of books;index as i">
       {{i + 1}} - {{item.name}}
    </div>

3. ngSwith

  <div [ngSwitch]="expression">
        <div *ngSwitchCase="'value1'">Content 1</div>
        <div *ngSwitchCase="'value2'">Content 2</div>
        <div *ngSwitchDefault>Default Content</div>
    </div>

4.双向绑定 ngModel 需要在app.module.ts中引入 FormsModule

import {FormsModule} from '@angular/forms'

 imports: [
    FormsModule
  ],

   <input [(ngModel)]="message" placeholder="message" />
    <p> {{message}}</p>

5.模板变量 ，模板变量可以帮助你在模板的另一部分使用这个部分的数据，用# 定义

  <input #phone placeholder="phone number" />
    <button type="button" (click)="callPhone(phone.value)">Call</button>

6. 表单控件：需要在app.module.ts中引入 ReactiveFormsModule

import { ReactiveFormsModule} from '@angular/forms'

@NgModule({
 
  imports: [
  
    ReactiveFormsModule
    
  ],
 
})
export class AppModule { }

　　组件中使用

    <div>
        <p>{{favoriteColorControl.value}}</p>
        <input type="text" [formControl]="favoriteColorControl"/>
    </div>

import { FormControl } from '@angular/forms';

 favoriteColorControl = new FormControl('');

　　

 7.表单控件分组 formGroup

 

    <div>
        <form [formGroup]="profileForm">

            <label for="first-name">First Name: </label>
            <input id="first-name" type="text" formControlName="firstName">
          
            <label for="last-name">Last Name: </label>
            <input id="last-name" type="text" formControlName="lastName">
          
          </form>
          <button (click)="handleClick()">submit</button>
    </div>


import { FormGroup,FormControl } from '@angular/forms';


  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });

　　8. 管道，创建： ng g p 管道名