angular5:ngIf与ngFor的使用指南与技巧

60 阅读 0 评论 40 点赞

我是靠谱客的博主灵巧香水，最近开发中收集的这篇文章主要介绍angular5:*ngIf与*ngFor的使用指南与技巧，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这段时间对于ngIf与ngfor的使用变得多样化,也解决了一些原本写代码的痛点.得以喘息机会,细细总结一下. ngIf与ngFor在angular里被称为是结构型指令.所谓结构型指令,就是它能够塑造或重塑DOM的结构. 说句话就是在渲染的时候它能够帮你增加,删除,维护这些元素.

*ngIf
学过vue的话,就知道ngIf与v-if是一样的.就是将元素从DOM树移除,或者是不加载.

<div *ngIf="true">
		console.log("我加载了")
</div>
<div *ngIf="false">
		
</div>

知道 *ngIf的使用,就会想有没有else if的使用操作,当然会有.

ts:
isflag = true

html:
<div  *ngIf="isflag; else notflag">
<p>这是为true的情况</p>
</div>
<ng-template #notflag>
<div>
这是为false的情况
</div>
</ng-template>

注:一定要用ng-template. 如果要保证替换后的样式一样,务必在ng-template内嵌入div

ngFor
顾名思义,循环数组.使用频率过大. 官网所给的index,trackBy在这里就不解释了. 不过trackBy这个,希望诸位务必使用.因为他会监测列表内元素的改变. 他只会替换掉改变的列表项.
我下面介绍一个ngFor与管道的混合使用.主要解决的问题是,我不想修改原数组,只想改变呈现的方式.

下面是一串数组

let array = [
{
id:'1',
name:'成昆',
},{
id:'2',
name: '花满楼'
}
]

现在我只想展示花满楼,不想展示成昆.怎么做.或许你会按照老方法.

array = array.filter(item=> item.name!=="成昆");

但是你更改了array.如果我想在其他列表依然使用.那就会出问题. 或许你说,把它深拷贝另一个数组.我说:省省吧.现在我们用pipe管道来解决这个问题.

<div  *ngFor="let item of (array|huamanlou)">
{{item.name}}
</div>

pipe:

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "joinUser"
})
export class JoinUserPipe implements PipeTransform {
  transform(value: any, args?: any): any {
      let result = [];
      result = value.filter(item=> item.name!=="成昆");
      return result;
  }
}