Question

如何使用角度在for循环中使用正确的过滤器

2021-04-27

1573

angular typescript for-loop filter

我有这个数组 ["让我介绍一下", "我们的价值观"]

我使用此代码：

var dataname: string[] = item[4].namecategory;
         for (var i = 0; i < dataname.length; i++) {
         console.log(dataname[i]); // output dataname[i] Let me introduce dataname[i] Our Values
         }
    this.CrewChannelContents_category = this.CrewChannelContents.filter(x => x.Category.toLowerCase().includes(dataname[i].toLowerCase()));

显示错误

core.js:15724 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'toLowerCase' of undefined
TypeError: Cannot read property 'toLowerCase' of undefined

数据来自 this.CrewChannelContents

[
                    {
                        Id: "15",
                        Category: "Our Values,WIDE",
                        Date: new Date('2019-12-02'),
                        
                    },
                    {
                        Id: "17",
                        Category: "Let me introduce",
                        Date: new Date('2019-12-05'),
                    
                    },.....
]

更新后的代码：

let tmpVal;
                    for (var i = 0; i < dataname.length; i++) {
                        tmpVal = this.CrewChannelContents.filter(x => x.Category.toLowerCase().includes(dataname[i].toLowerCase()));
                        if (tmpVal) this.CrewChannelContents_category.push(tmpVal)
                        console.log(this.CrewChannelContents_category)
                    }

错误

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'push' of undefined TypeError: Cannot read property 'push' of undefined

在过滤器行中。

请问您能与我分享任何想法吗，当我有数据数组时如何过滤？

谢谢大家

更新后的代码 (2)

for (var i = 0; i < dataname.length; i++) {
                    console.log(this.CrewChannelContents.filter(x => x.Category.toLowerCase().includes(dataname[i].toLowerCase())));
                    this.CrewChannelContents_category = this.CrewChannelContents.filter(x => x.Category.toLowerCase().includes(dataname[i].toLowerCase()));
                    this.tmpvalue.push(this.CrewChannelContents_category);
                    console.log(this.tmpvalue)
                }

获取类似

Answer 1

看起来你只需要在循环中包含你的过滤器检查：

export class SomeComponent implements OnInit {
   CrewChannelContents_category: string[];

   ngOnInit() {

        var data = [{
            Id: "15",
            Category: "Our Values,WIDE",
            Date: new Date('2019-12-02'),
        },
        {
            Id: "17",
            Category: "Let me introduce",
            Date: new Date('2019-12-05'),
        }]
    
    
    
        var dataname = ["Let me introduce", "Our Values"];
    
        // reset the CrewChannelContents_category variable
        this.CrewChannelContents_category = [];
        let tmpVal
        for (var i = 0; i < dataname.length; i++) {
            tmpVal = data.filter(x => x.Category.toLowerCase().includes(dataname[i].toLowerCase()));
            if (tmpVal) this.CrewChannelContents_category.push(tmpVal)
        }
    
    }

Answer 2

这是因为您在循环外部使用了 dataname[i]，其中 i 大于 dataname 长度。因此，对于过滤，您可以使用：

var data = [
  {
    Id: "15",
    Category: "Our Values,WIDE",
    Date: new Date("2019-12-02")
  },
  {
    Id: "17",
    Category: "Let me introduce",
    Date: new Date("2019-12-05")
  }
];
var dataname = ["Let me introduce", "Our Values"];
console.log(
  data.filter((x) =>
    dataname.some((y) => x.Category.toLowerCase().includes(y.toLowerCase()))
  )
);

有关 array.some() 工作原理的参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some