angular8基础知识(一)

一.组件的创建:

ng g component components/header

调用方式:将组件引入app.module.ts

image.png

二.数据绑定

image.png
image.png
三.数据循环
image.png
image.png

四.条件判断

image.png image.png

五.执行事件

image.png
image.png

六.表单事件

image.png
image.png
七.双向数据绑定
image.png
image.png
image.png

八.[ngClass][ngStyle]

image.png
九.管道
image.png

页面全部代码
<app-header></app-header>
<br/>
<!--数据文本绑定-->
<h1>{{title}}</h1>
<h1>{{titles}}</h1>
<br>
<span>{{students.name}}</span><br>
<span>{{students.core}}</span><br>
<span>{{students.number}}</span>
<!--绑定html-->
<div [innerHTML] = 'msghtml'></div>
<!--绑定属性-->
<div [title]="titles">22</div>
<br><br><br><br>
<!--普通循环-->
<ul>
  <li *ngFor="let item of itemList">
      {{item}}
  </li>
</ul>
<br>
<!--循环时设置key-->
<ul>
  <li *ngFor="let item of itemList; let key = index">
    {{item}}---{{key}}
  </li>
</ul>
<!--各种嵌套循环...-->

<br>
<!--条件判断 *ngIf-->
<p *ngIf="itemLists.length>2">判断是否显示</p><br>
<!--*ngSwitch-->
<ul [ngSwitch]="orderStatus">
  <li *ngSwitchCase="1">1</li>
  <li *ngSwitchCase="2">2</li>
  <li *ngSwitchCase="3">3</li>
  <li *ngSwitchCase="4">4</li>
</ul>
<br>
<!--执行事件-->
<button (click)="getData()" >点击按钮触发事件</button><br>
<button (click)="setData()">点击按钮设置数据</button>
<br>
<!--表单事件-->
<input type="text" (keyup)="keyUpFn($event)"/><br>
<!--双向数据绑定-->
<input type="text" [(ngModel)]="inputValue">{{inputValue}}
<br>
<br>
<br>
<!--[ngClass]、[ngStyle]-->
<div [ngClass]="{'red':false,'blue':true}">
  this is a div!
</div>

<div [ngClass]="{'red':!flag,'blue':flag}">
  啦啦啦啦啦啦
</div>

<div>
  <ul>
    <li *ngFor="let item of itemList,let key = index">
      <span [ngClass]="{'red':key==2}">{{item}}</span>
    </li>
  </ul>
</div>

<div [ngStyle]="{'color':'#00c'}">22222222</div>

<!--管道-->
<!--日期转换格式-->
<p>{{today|date:'yyyy-MM-dd HH:mm:ss'}}</p>
<!--大小写转换-->
<p>{{str | uppercase}}</p>
<p>{{str | lowercase}}</p>
<!--小数位数
  //接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
//保留2~4位小数-->
<p>{{price | number:'1.2-4'}}</p>
<!--JavaScript 对象序列化-->
<p>{{ { name: 'semlinker' } | json }}</p><!-- Output: { "name": "semlinker" } -->
<!--slice-->
<p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem -->
<!--管道链-->

<p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <!-- Output: SEM -->