只看视频印象不深 只有记录下来才能记得更久~
一，引入图片
????????之前介绍到的src中有一个静态资源文件夹：assets
????????在这里新建一个images的文件夹来存放用到的图片，然后在xxx.component.html中填入
<!-- 第一种 -->
//网络和静态资源都可
<img src="assets/images/1.jpg" alt="图片">
//或者
<img src="https://i.loli.net/2021/09/22/16uNXCVrtzR7WDI.jpg" alt="图片">????????或从ts页面引入
//html页面
<img [src]="picUrl" alt="引用">
//ts页面
//export class HomeComponent implements OnInit中填写
//网络和本地资源都可
public picUrl = "https://i.loli.net/2021/09/22/16uNXCVrtzR7WDI.jpg"
//或者
public picUrl = "assets/images/1.jpg"
?
二，循环数据 显示数据的索引（key）
????????在循环数据的基础上添加以下代码再引用即可
let key = index"????????示例：
//html页面
<h1>循环数据 显示数据的索引（key）</h1>
<ul>
<li *ngFor="let item of list;let key = index">
{{key}}---{{item.title}}
</li>
</ul>
//ts页面
public list:any[] = [
{
"title":"新闻1"
},
{
"title":"新闻2"
},
{
"title":"新闻3"
}
];
?
三，条件判断语句 *ngif
????????ngif可以通过Boolean类型更改显示的图片 如下示例：
//html页面
<h1>条件判断语句 *ngif</h1>
//若flag为true则显示1.jpg
<div *ngIf="flag">
<img src="assets/images/1.jpg" alt="">
</div>
//若flag为false则显示调用ts页面的图片
<div *ngIf="!flag">
<img [src]="picUrl" alt="">
</div>
//ts页面
public flag:boolean = false;
//css页面
img{
max-width: 60px;
}????????ngif判断后更改样式示例：
//html页面
<ul>
<li *ngFor="let item of list;let key = index;">
//若item的角标值为1，添加red这个class
<span *ngIf = "key == 1" class="red">{{key}}---{{item.title}}</span>
//若item的角标值不为1，不添加class
<span *ngIf = "key != 1">{{key}}---{{item.title}}</span>
</li>
</ul>
//ts页面
public list:any[] = [
{
"title":"新闻1"
},
{
"title":"新闻2"
},
{
"title":"新闻3"
}
];
//css页面
.red{
color: red;
}
?
四，条件判断语句 *ngSwitch
????????选择一个条件显示 示例：
//html页面
<h1>条件判断语句 *ngSwitch</h1>
<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">
1：已经支付
</p>
<p *ngSwitchCase="2">
2：支付且确认订单
</p>
<p *ngSwitchCase="3">
3：已经发货
</p>
<p *ngSwitchCase="4">
4：已经收货
</p>
<p *ngSwitchDefault>
5：无效
</p>
</span>
//ts页面
// 1：已经支付 2：支付且确认订单 3：已经发货 4：已经收货 5：无效
public orderStatus:number = 3;
?
五，属性[ngClass] [ngStyle]
1，ngClass
? ? ? ? 两种控制字体样式的方式：
//html页面
<h1>属性[ngClass] [ngStyle]</h1>
//第一种,将blue的class添加 red不添加
<div [ngClass] = "{'blue':true,'red':false}">
ngClass演示：尽量不要用dom来改变
</div>
//第二种 引用后台数据, flag值为false 添加orange的class blue不添加
<div [ngClass] = "{'orange':!flag,'blue':flag}">
ngClass演示：尽量不要用dom来改变3
</div>
//ts页面
public flag:boolean = false;
//css页面
.red{
color: red;
}
.blue{
color: blue;
}
.orange{
color: orange;
}????????循环数组，让数组第一个元素的样式为red,第二个为orange,第三个为blue：
//html页面
<strong>循环数组，让数组第一个元素的样式为red,第二个为orange,第三个为blue</strong>
<li *ngFor="let item of list;let key = index;" [ngClass] = "{'red':key == 0,'orange':key == 1,'blue':key == 2}">
{{key}}---{{item.title}}
</li>
//ts页面
public list:any[] = [
{
"title":"新闻1"
},
{
"title":"新闻2"
},
{
"title":"新闻3"
}
];
css略2，ngStyle
? ? ? ? 三种改变样式方式：
//html页面
<p style="color: red;">第一个p标签</p>
<p [ngStyle]="{'color': 'blue'}">第二个p标签</p>
<p [ngStyle]="{'color': attr}">第三个p标签</p>
//ts页面
public attr:string = 'orange';
?
六，管道
?????????其他管道?
? ? ?????http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34
? ? ? ? 更改日期示例：
//html页面
<h1>管道</h1>
// | 后面就是所要用的格式
{{today | date:'yyyy-MM-dd HH:mm ss'}}
//ts页面
public today:any = new Date();
//可用以下代码查看更改前后样式
constructor() {
console.log(this.today);
}?
?
七，事件
//html页面
<button (click) = "run()">执行事件</button>
<button (click) = "getDate()">执行方法获取数据</button>
<br>
//点击后会将下方strong标签内文字更改为button中文字
<button (click) = "setDate()">执行方法改变属性里面的数据</button>
<br>
<button (click) = "runEvent($event)">执行方法获取事件对象</button>
<br>
<strong>{{title}}</strong>
//ts页面
run(){
alert("自定义方法")
}
getDate(){
alert(this.title)
}
setDate(){
this.title = '改变后的title'
}
runEvent(event: any){
// ionic里必须指定类型
var dom:any = event.target;
dom.style.color = "red";
}
?
?
?
?
八，表单事件?事件对象
//html页面
<h1>表单事件 事件对象</h1>
//注意括号内keydown和keyup必须为小写
<!-- <input type="text" (keydown) = "keyDown()" /> -->
<input type="text" (keydown) = "keyDown($event)" />
<br><br>
<input type="text" (keyup) = "keyUp($event)" />
//ts页面
//添加括号内的e必须添加类型 否则报错 但老师的可以不添加不知道为什么
keyDown(e: any){
if(e.keyCode == 13){
console.log("按了一下回车");
}else{
// 获取当前对象的值
console.log(e.target.value);
}
// console.log(e.keyCode);
}
//在用keydown打印对象的值时会一直显示前一个值 所以改用keyup
keyUp(e: any){
if(e.keyCode == 13){
console.log("按了一下回车");
// 获取当前对象的值
console.log(e.target.value);
}
}
九，双向数据绑定--MVVM?只是针对表单
1，双向数据绑定
? ? ? ? 在这遇见坑，一直报错
Error: src/app/components/home/home.component.html:112:39 - error TS2339: Property 'words' does not exist on type 'HomeComponent'.
112 ? ? ?<input type="text" ?[(ngModel)]="words" />
? ? ? ? 然后我仔细和老师的步骤对照发现没有错
? ? ? ? 老师的代码：
//html页面
<h1>双向数据绑定--MVVM 只是针对表单</h1>
<input type="text" [(ngModel)]="words" />
{{words}}
//app.module.ts页面
import { FormsModule } from '@angular/forms';
imports: [
FormsModule
],? ? ? ? 然后我去求助万能的百度，发现这个words是要在ts页面引用的~
//ts页面
public words:any='2';
?
2，改变与获取words的值
//html页面
<button (click) = "changeWords()">改变words的值</button>
<br><br>
<button (click) = "getWords()">获取words的值</button>
//ts页面
changeWords(){
this.words = "改变后的值";
}
getWords(){
console.log(this.words);
}
?
?
如有错误欢迎指正~