Angular 如何根据特定条件存储json数据

数据是什么样子的

0: {id: 1, name: "strter", subscriber: 2500, amount: 0}
1: {id: 2, name: "Pro_2500", subscriber: 2500, amount: 10}
2: {id: 3, name: "Pro_5k", subscriber: 5000, amount: 20}
3: {id: 4, name: "Pro_10k", subscriber: 10000, amount: 30}
4: {id: 14, name: "Enterprise_2500", subscriber: 2500, amount: 100}
5: {id: 15, name: "Enterprise_5k", subscriber: 5000, amount: 110}
6: {id: 16, name: "Enterprise_10k", subscriber: 10000, amount: 120}

我已经申报了starter pro和enterprise的3个属性。以上所有数据都在属性

allPlans

我希望根据名称是pro、starter还是enterprise，将所有数据存储到各自的属性中。因此，name为pro的所有数据都应存储在

pro:any

export class XComponent implements OnInit {
allPlans: any;
starter: any;
pro: any;
enterprise: any;

 constructor(private activatedRoute: ActivatedRoute) { 
    activatedRoute.data.subscribe((res)=>{
      this.allPlans = res.plansresolve.data;
    });
  }
}

我试过这个，它把所有的都打印出来了

this.pro = this.allPlans.find((x: any)=>{ x.name === "Pro_"; console.log(x.name) })

}

---

或者

开关

情况也是最好的

我会使用RXJS映射操作符来转换数据

this.pro = this.allPlans.filter((x: any)=>{ x.name.indexOf("Pro_")>-1 });

从'@angular/core'导入{Component，OnInit}；
从“rxjs”导入{BehaviorSubject}；
从“rxjs/operators”导入{map}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
名称='角度'；
公共数据={所有计划：[
{id:1，名称：“strter”，订户：2500，金额：0}，
{id:2，姓名：“Pro_2500”，订户：2500，金额：10}，
{id:3，姓名：“Pro_5k”，订户：5000，金额：20}，
{id:4，姓名：“Pro_10k”，订户：10000，金额：30}，
{id:14，名称：“Enterprise_2500”，订户：2500，金额：100}，
{id:15，名称：“Enterprise_5k”，订户：5000，金额：110}，
{id:16，名称：“Enterprise_10k”，订户：10000，金额：120}，
],
起动器：[]，
赞成：[]，
企业：[]}；
扩展数据：BehaviorSubject=新的BehaviorSubject（this.data）；
结果：[]；
恩戈尼尼特（）{
这个是.xdata
.烟斗(
地图（d=>{
d、 starter=d.allPlans.filter（f=>f.name=='strter'）；
d、 pro=d.allplan.filter（f=>f.name.substring（0，3）='pro'）；
d、 enterprise=d.allPlans.filter（f=>f.name.substring（0,10）==“enterprise”）；
返回d；
})
).订阅（d=>{
结果=d；
});
}
}

@natecog，find（）方法返回数组中满足提供的测试函数的第一个元素的值。否则将返回undefined。您必须检查子字符串，而不是直接“Pro”

this.pro = this.allPlans.filter((x: any)=>{ x.name.indexOf("Pro_")>-1 });

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';

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

  name = 'Angular';
  public data = {allPlans: [
    {id: 1, name: "strter", subscriber: 2500, amount: 0},
    {id: 2, name: "Pro_2500", subscriber: 2500, amount: 10},
    {id: 3, name: "Pro_5k", subscriber: 5000, amount: 20},
    {id: 4, name: "Pro_10k", subscriber: 10000, amount: 30},
    {id: 14, name: "Enterprise_2500", subscriber: 2500, amount: 100},
    {id: 15, name: "Enterprise_5k", subscriber: 5000, amount: 110},
    {id: 16, name: "Enterprise_10k", subscriber: 10000, amount: 120},
  ],
  starter: [],
  pro: [],
  enterprise: []};

  xdata: BehaviorSubject<any> = new BehaviorSubject(this.data);

  result: [];

  ngOnInit() {
    this.xdata
    .pipe(
      map( d => {
        d.starter = d.allPlans.filter(f => f.name === 'strter');
        d.pro = d.allPlans.filter(f => f.name.substring(0, 3) === 'Pro');
        d.enterprise = d.allPlans.filter(f => f.name.substring(0, 10) === 'Enterprise');
        return d;
        })
    ).subscribe( d => {
      this.result = d;
    });
  }
}