Angular Pipe 在 嵌套对象上的非预期行为分析

Angular Pipe 在 嵌套对象上的非预期行为分析

场景

在工作中，存在一个嵌套对象，需要展示嵌套对象内层的一些信息，于是写了个Pipe 来处理，但是发现当嵌套的对象发生变化时，pipe 不会重新执行。例如有下面一个数据。

var feer = {
    name: 'joe'，
    skills: [
        {
            name:'js'
        },{
            name: 'ts'
        }
    ]
}

我们想要的结果是把skills 里面的name 全部展示出来，以, 分割。

// component
export class AppComponent {
  private skills = ['css','html','java','gulp']
  name = 'Angular 6';
  feer = {
    name: 'joe',skills: [
      {
        name: 'js'
      },{
        name: 'ts'
      }
    ]
  }

  add() {
    const skill = this.skills.shift();
    if (skill) {
      this.feer.skills.push({
        name: skill
      })
    }
  }
}
// html
{{ feer.skills | defaultPure }}
// Pipe
import { Pipe,PipeTransform } from '@angular/core';

@Pipe({
    name: 'defaultPure'
})

export class DefaultPurePipe implements PipeTransform {
    transform(feer:any): string {
        return feer.skills.map((v)=>v.name).join(',');
    }
}

在这种情况下，如果调用add 引起 skills 发生变化，pipe 不会重新计算，显示的还是初始值 js,ts。

问题

这里存在一个问题，对于上面

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!