HiDocs
Search K

Appearance

1.定义和绑定数据：模板语法{ ​

js
public title:string = "标题"
msg = "消息" //可以不加public
html
{{ title }}
{{ msg }}

注意：不只有public修饰符，还有protect、private等

bash
声明属性的几种方式：
        
  public      公有 *（默认） 可以在这个类里面使用、也可以在类外面使用

  protected   保护类型        他只有在当前类和它的子类里面可以访问

  private     私有            只有在当前类才可以访问这个属性

在constructor构造器中进行赋值或者修改值

js
public message: any; //只是声明了，没有给具体的值

msg = '我是一个新闻组件的msg';

constructor() {
    this.message = '这是给属性赋值';

    //获取属性的值
    console.log(this.msg);

    //改变属性的值
    this.msg = '我是改变后的msg的值';
}

2.绑定属性：[]指令 ​

ts
//推荐
public student: any = '我是一个学生的属性（数据）';
html
<div [title]="student">
  张三
</div>

注意：这里其实[]就相当于是:，也就是vue里面的v-bind:

3.绑定html ​

js
public content = '<h2>我是一个html标签</h2>';
html
<span [innerHTML]='content' class="red"></span>

innerHTML属性是html官方属性，可以解析html标签

相当于v-html标签

4.数据循环*ngFor ​

js
//定义数组
public arr = ['1111', '2222', '33333'];
html
<ul>
  <li *ngFor="let item of arr">
      {{item}}
  </li>
</ul>

注意：这里是let item of arr，相当于原生的for(let item of arr){},和vue里面的v-for的item in arr是不一样的！

注意：安装了angular的代码片段插件的话，只需要打ngfor就可以出来快捷代码了，直接选中即可快捷编写！

image-20230912224145781

获取索引

image-20230912223446743

html
<h1>循环数据 显示数据的索引（key）</h1>
<ul>
  <li *ngFor="let item of list;let key=index;">
    {{key}}---{{item.title}}
  </li>
</ul>

5.条件判断*ngIf ​

ts
public flag:boolean=true;

注意：angular里面是没有else的，所以遇到两个情况的，就用下面这种方式

html
<div *ngIf="flag">
  <img src="assets/images/02.png" />
</div>

<div *ngIf="!flag">
  <img src="assets/images/01.png" />
</div>

我们发现angular里面没有else很不方便，那么怎么办？

html
<ng-template *ngIf="
    item.label !== '威胁等级' &&
    item.label !== '置信度' &&
    item.label !== '攻击研判结果'; else elseBlock
">
    {{ item.value | avoidNull }}
</ng-template>
<ng-template #elseBlock>
    Content to show when condition is false.
</ng-template>

注意：ng-template就是空标签，相当于vue里面的template标签

6.多条件判断[ngSwitch]+*ngSwitchCase ​

注意：angular里面是没有else-if的，所以遇到多个情况的，就用ngSwitch才可以了！

js
public orderStatus:number = 3;    /* 1表示已经支付   2支付并且确认订单   3、表示已经发货   4表示已经收货   其他、无效*/
html
<h1>条件判断语句 [ngSwitch]</h1>
<span [ngSwitch]="orderStatus">
  <p *ngSwitchCase="1">
    表示已经支付
  </p>
  <p *ngSwitchCase="2">
    支付并且确认订单
  </p>
  <p *ngSwitchCase="3">
    表示已经发货
  </p>
  <p *ngSwitchCase="4">
    表示已经收货
  </p>
  <!--如果1，2，3，4都不是的话，那么就走下面这个-->
  <p *ngSwitchDefault>
    无效订单
  </p>
</span>

7.样式属性绑定[ngClass]、[ngStyle] ​

（1）[ngClass] ​

[ngClass]就是class类的列表！

html
<div class="red">
  ngClass演示（尽量不要用dom来改变class）
</div>

<div [ngClass]="{'blue':true,'red':false}">
  ngClass演示
</div>

<hr>


<div [ngClass]="{'orange':flag,'red':!flag}">
  ngClass演示
</div>
<!--也可以用三元运算符：-->
<div [ngClass]="flag?'orange':'red'">
  ngClass演示
</div>

<strong>循环数组，让数组的第一个元素的样式为red，第二个为orange</strong>
<ul>
  <li *ngFor="let item of list;let key=index;" [ngClass]="{'red':key==0,'orange':key==1,'blue':key==2}">
    {{key}}---{{item.title}}
  </li>
</ul>

相当于vue中的:class=“[flag?’classA’:’’,’classB’]”

html
<section
 :class="[
         'winStatus_' +
         (scheduleData.team_id_b === padTeamId
         ? scheduleData.status_b
         : scheduleData.status_a),
         scheduleData.team_id_b === padTeamId ? 'rowReverse' : '',
         ]"
 class="section"
 >

（2）[ngStyle] ​

主要是指定单独的样式属性

html
<p style="color:red">我是一个p标签</p>

<p [ngStyle]="{'color':'blue'}">我是一个p标签</p>

<p [ngStyle]="{'color': attr}">我是一个p标签 </p>

相当于vue中的:style=“{a:’b’,c:’d’}”

这个{}其实有没有都可以

vue
<!--写法一-->
<div :style="flag ? 'position: absolute; bottom: 100px;' : ''"></div>
<!--写法二-->
<div :style="flag ? {position: 'absolute', bottom: '100px'} : ''"></div>
<!--写法三-->
<div :style="{position: 'absolute', bottom: '100px'}"></div>

8.管道（过滤器） ​

js
public today:any=new Date();
html
<h1>管道</h1>
{{today | date:'yyyy-MM-dd HH:mm ss'}}

转换为年月日时分秒格式

注意：还可以进行快捷的大小写和小数点转换，官方提供的快捷方法！

还可以自定义管道（自定义方法）

image-20230921113222948

image-20230921113203011

9.绑定事件(click) ​

html
<h1>事件</h1>

<strong>{{title}}</strong>

<!--方法一定要加括号，因为相当于是原生html绑定事件-->
<button (click)="run()">执行事件</button>

<button (click)="getData()">执行方法获取数据</button>

<button (click)="setData()">执行方法改变属性里面的数据</button>

<button (click)="runEvent($event)">执行方法获取事件对象</button>

<h1>表单事件 事件对象</h1>

keyDown
<!-- <input type="text" (keydown)="keyDown()" /> -->
<input type="text" (keydown)="keyDown($event)" />

keyUp:
<input type="text" (keyup)="keyUp($event)" />
js
run(){
  alert('这是一个自定义方法')
}

getData(){
	alert(this.title);
}

setData(){
	this.title='我是一个改变后的title';
}

runEvent(event:any){
    //ionic必须这样写
    let dom:any = event.target; //获取触发事件的dom对象
    dom.style.color="red";
}

keyDown(e:any){
    if(e.keyCode==13){
        console.log('按了一下回车')
    }else{
        //e.target 获取dom对象
        console.log(e.target.value); //e.target.value获取表单输入的值
    }
}

//按了回车就获取值！
keyUp(e:any){
    if(e.keyCode==13){
        console.log(e.target.value);
        console.log('按了一下回车');
    }  
}

changeKeywords(){
	this.keywords='我是改变后的值';
}

getKeywords(){
	console.log(this.keywords)
}

10.双向数据绑定[(ngModel)] ​

注意：必须要先在模块根文件app.modules.ts里面引入并声明，才可以使用ngModel指令

bash
import { FormsModule } from "@angular/forms";
image-20230913012534965
html
<h1>双向数据绑定--MVVM 只是针对表单</h1>

<input type="text" [(ngModel)]='keywords' />

{{keywords}}

<button (click)="changeKeywords()">改变keywords的值</button>

<button (click)="getKeywords()">获取keywords的值</button>
js
public keywords:string='这是默认值';
changeKeywords(){
	this.keywords='我是改变后的值';
}
getKeywords(){
	console.log(this.keywords)
}

注意：[ngModel]和[(ngModel)]的区别？

[ngModel] 和 [(ngModel)] 是 Angular 中用于双向绑定的指令，用于在模板中实现数据的双向绑定，但它们有略微不同的用法和含义。

  1. [ngModel]：单向绑定 [ngModel] 是 Angular 中的一种单向绑定，它允许你将模板中的某个 HTML 元素的值（value属性）绑定到组件中的属性。这样，当组件属性发生变化时，HTML 元素的值也会随之更新，但不会反过来影响组件属性。

    html
    <input [ngModel]="name">

  2. [(ngModel)]：双向绑定 [(ngModel)] 则是 Angular 中的一种双向绑定，它结合了输入属性绑定（[ngModel]）和事件绑定（(ngModelChange)），允许你实现模板和组件之间的双向数据流。不仅能将模板中的 HTML 元素的值绑定到组件属性，还能在 HTML 元素的值发生变化时更新组件属性，并且也能响应组件属性的变化更新到 HTML 元素。

    html
    <input [(ngModel)]="name">

    等价于：

    html
    <input [ngModel]="name" (ngModelChange)="name = $event">

    其中，$event 是输入元素发生变化时的事件对象，其值为输入元素的新值。

总结：

  • [ngModel] 是单向绑定，用于将组件属性绑定到模板中的 HTML 元素。
  • [(ngModel)] 是双向绑定，不仅将组件属性绑定到模板中的 HTML 元素，还能监听 HTML 元素值的变化并将其更新到组件属性中。

11.案例：表单项的提交 ​

radio，select，checkbox

html
<ul>
    <li>姓 名：<input type="text" id="username" [(ngModel)]="peopleInfo.username" value="fonm_input" /></li>
    <li>性 别：
      <!--这里只要指定了name，就会自动成为一组按钮组，这样就只能选中一个了，peopleInfo.sex等于value的时候就会选中，默认选中男-->
      <input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"> <label for="sex1">男 </label>　　　
      <input type="radio" value="2" name="sex" id="sex2" [(ngModel)]="peopleInfo.sex"> <label for="sex2">女 </label>
    </li>
    <li>
      城 市：
      <select name="city" id="city" [(ngModel)]="peopleInfo.city">
        <option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option>
      </select>
    </li>
    <li>
      爱 好：
      <span *ngFor="let item of peopleInfo.hobby;let key=index;">
        <!--id和for使用拼接的方式-->
        <input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked" /> 
        <label [for]="'check'+key">{{item.title}}</label>
      </span>
    </li>
    <li>
      备 注：
      <textarea name="mark" id="mark" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea>
    </li>
</ul>
<button (click)="doSubmit()" class="submit">获取表单的内容</button>
{{ peopleInfo | json }} <!--使用json管道转化对象，把json字符串展示在页面上-->
ts
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {


  public peopleInfo:any={

    username:'',
    sex:'1', //默认选中男
    cityList: ['北京','上海','深圳'],
    city:'上海',

    hobby:[{

          title:'吃饭',
          checked:false
      },{

            title:'睡觉',
            checked:false
        },{

          title:'敲代码',
          checked:true
      }],

      mark:''

  }

  doSubmit(){
    /*    
    jquery  dom操作：获取表单的输入值

      <input type="text" id="username" />
      let usernameDom:any=document.getElementById('username');
      console.log(usernameDom.value);    
    */
    console.log(this.peopleInfo);
  }
}

12.案例：搜索历史记录 ​

html
<div class="search">
    <input type="text" [(ngModel)]="keyword" />  <button (click)="doSearch()">搜索</button>
    <hr>
    <ul>
      <li *ngFor="let item of historyList;let key=index;">{{item}} ------ <button (click)="deleteHistroy(key)">X</button></li>
    </ul>
</div>
ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {

  public keyword:string | undefined;   //表示它可以是string类型也可以是undefined类型

  public historyList:any[]=[];

  doSearch(){

    if(this.historyList.indexOf(this.keyword)==-1){ //如果不存在这个历史记录

      this.historyList.push(this.keyword);
    }    
    this.keyword='';    
  }

  deleteHistroy(key:any){
      alert(key);
      this.historyList.splice(key,1);
  }
    
}

13.案例：todolist ​

html
<h2>todoList</h2>
<div class="todolist">
    <input class="form_input" type="text" [(ngModel)]="keyword" (keyup)="doAdd($event)" />
    <hr>
    <h3>待办事项</h3>
    <ul>
      <!--注意：angular7之后，多个指令不能在一个标签上面写-->
      <!--所以这里我们采用hidden属性，表示隐藏这个标签-->
      <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==1">
       <input type="checkbox" [(ngModel)]="item.status" /> {{item.title}} ------ <button (click)="deleteData(key)">X</button>
      </li>
    </ul>

    <h3>已完成事项</h3>
    <ul>
        <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==0">
         <input type="checkbox" [(ngModel)]="item.status" /> {{item.title}} ------ <button (click)="deleteData(key)">X</button>
        </li>
    </ul>
</div>
js
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-todolist',
  templateUrl: './todolist.component.html',
  styleUrls: ['./todolist.component.scss']
})
export class TodolistComponent implements OnInit {

  public keyword:string | undefined;

  public todolist:any[]=[];

  doAdd(e:any){
    if(e.keyCode==13){
        if(!this.todolistHasKeyword(this.todolist,this.keyword)){
          this.todolist.push({
            title:this.keyword,
            status:0  //0表示代办事项  1表示已完成事项
          });
          this.keyword='';
        }else{
          alert('数据已经存在');
          this.keyword='';
        }
     }
  }

  deleteData(key:any){

    this.todolist.splice(key,1);
  }

  //如果数组里面有对象的title和keyword一样就返回true，否则返回false（这里由于是对象数组，所以没办法使用includes判断存在性）
  todolistHasKeyword(todolist:any,keyword:any){

    //forEach是没有返回值的，所以在里面return不能结束父函数并返回，只能退出当前的循环，正确写法应该是赋值给一个变量，然后最后再判断变量！
    // todolist.forEach(value => {
    //   if(value.title==keyword){
    //       return true;
    //   } 
    // });

    if(!keyword) return false;

    for(var i=0;i<todolist.length;i++){
      if(todolist[i].title==keyword){

          return true;
      } 
    }
    //或者可以用some函数 
    //return todolist.some(e => e.title == keyword)
      
    //全部没有匹配，那么就返回false
    return false;
  }
}

html的hidden属性？

HTML 元素中的 hidden 属性是一个布尔属性，它用于指示一个元素是否应该在页面加载时被隐藏。当设置了 hidden 属性时，元素将在页面渲染时不可见，但它仍然存在于文档中，并且可以通过JavaScript或其他手段进行操作和显示。

以下是一些关于 hidden 属性的重要信息：

  1. 语法：hidden 属性是一个布尔属性，因此不需要指定值。只需在元素上添加 hidden 属性即可，如下所示：

    htmlCopy code
<div hidden>This is a hidden element</div>

  2. 作用：设置 hidden 属性的元素在页面加载时会被隐藏，用户将看不到它。这通常用于在页面中暂时隐藏元素，然后在需要时通过JavaScript来显示它。

  3. 与 CSS 的区别：虽然 hidden 属性可以隐藏元素，但它并不会影响元素的布局。元素仍然占用空间，并影响页面布局。如果想要完全隐藏元素并不占用空间，通常需要使用CSS属性如 display: none; 或 visibility: hidden;。