Angular 2中如何绑定div元素？如何获取管道返回数组长度及绑定索引

嘿，我来帮你搞定这两个Angular 2的问题，咱们一步步来～

Angular 2里对div的绑定主要分几种常见场景，我给你列出来：

• 属性绑定：用来绑定div的HTML属性或者组件/指令的属性，用方括号[]包裹属性名。比如：

  • 绑定富文本内容：

    <div [innerHTML]="componentContent"></div>
    

    这里componentContent是你组件类里定义的字符串变量，支持HTML标签。
  • 绑定CSS类：

    <div [class.active]="isActive"></div>
    

    当isActive为true时，div会自动加上active类，false则移除。
  • 绑定行内样式：

    <div [style.backgroundColor]="bgColor"></div>
    

    bgColor是组件里定义的颜色值，比如'#f0f0f0'或者'lightblue'。

• 事件绑定：监听div的各类事件，用圆括号()包裹事件名。比如点击事件：

  <div (click)="handleDivClick($event)">点击我试试</div>
  

  然后在组件类里定义对应的处理方法：

  handleDivClick(event: Event) {
    console.log('div被点击了', event);
    // 这里写你的业务逻辑
  }
  

• 双向绑定：div本身不是表单控件，默认不支持双向绑定，但如果是可编辑div（加contenteditable属性），可以结合FormsModule实现双向绑定：
  首先在模块里导入FormsModule，然后模板里：

  <div contenteditable [(ngModel)]="editableText"></div>
  

  组件类里定义editableText变量，就能实现内容的双向同步。

这个问题可以通过模板变量或者组件内预处理两种方式解决，都给你说说：

方法1：用模板变量存储管道结果 #

在*ngFor里，你可以用as关键字把管道处理后的数组存到一个模板变量里，这样不仅能在循环外部拿到数组长度，还能灵活处理索引：

<!-- 把管道过滤后的数组存到filteredItems变量，同时获取当前索引i -->
<div *ngFor="let item of originalData | myFilterPipe as filteredItems; let i = index">
  第{{ i+1 }}项：{{ item.title }}
</div>

<!-- 在循环外部直接访问数组长度 -->
<p>过滤后一共{{ filteredItems.length }}条数据</p>

如果需要把索引i传递到组件类里（比如点击item时记录当前选中的索引），可以通过事件绑定传递：

<div *ngFor="let item of originalData | myFilterPipe; let i = index" (click)="saveCurrentIndex(i)">
  第{{ i+1 }}项：{{ item.title }}
</div>

组件类里对应的方法：

currentIndex: number;

saveCurrentIndex(index: number) {
  this.currentIndex = index;
  console.log('当前选中的索引是：', this.currentIndex);
}

方法2：把管道逻辑移到组件类里 #

如果模板里的管道使用场景复杂，或者你需要在组件里直接操作过滤后的数组，不如把管道的过滤逻辑写到组件类里，这样数组长度和索引都能直接掌控：

// 组件类里
originalData = [/* 你的原始数据数组 */];
filteredItems: any[];

ngOnInit() {
  // 直接调用管道的transform方法，或者自己写过滤逻辑
  this.filteredItems = new MyFilterPipe().transform(this.originalData);
}

然后模板里直接用预处理后的数组：

<div *ngFor="let item of filteredItems; let i = index">
  第{{ i+1 }}项：{{ item.title }}
</div>

<p>过滤后一共{{ filteredItems.length }}条数据</p>

这种方式更灵活，组件里能随时修改过滤条件，索引也能在组件的循环逻辑里直接处理。

内容的提问来源于stack exchange，提问作者Naomi Messing