Question

我是Angular和Coding的新手。

我目前有这行代码可以过滤json中的品牌。这段代码为m.Properties。基本上，下面的代码要做的是查看品牌并过滤品牌，这些品牌的属性与filteredProperties数组中的字符串相同。

    for (var i = this.filteredProperties.length - 1; i >= 0; i--) {
        if (this.filteredProperties[i] == property) {
            this.visibleBrands = this.brands.filter(m => m.Properties == this.filteredProperties.find(y => y === m.Properties));
        }
    }

但是现在我的JSON看起来像这样，请注意，它已硬编码到我的服务中：

import { Injectable } from '@angular/core';

import { Brands } from '../models/brand.model';

@Injectable() 
export class BrandService {


    getBrands(): Brands[] {
        return [
            {
                "Id": 1,
                "Title": "Alternative Investments",
                "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin ornare lectus, quis gravida tortor venenatis nec.",
                "ImageUrl": "C:/Users/xy57418/Pictures/Anguar Rewrite/PlaceHolder BrandLogos.png",
                "FundsUrl": "www.google.com",
                "OurPeopleUrl": "www.google.com",
                "WhyInvestUrl": "www.google.com",
                "MoreInfoUrl": "www.google.com",
                "Properties": ["institutional"],

            },
            {
                "Id": 2,
                "Title": "Customised Solutions",
                "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin ornare lectus, quis gravida tortor venenatis nec. ",
                "ImageUrl": "C:/Users/xy57418/Pictures/Anguar Rewrite/PlaceHolder BrandLogos.png",
                "FundsUrl": "www.google.com",
                "OurPeopleUrl": "www.google.com",
                "WhyInvestUrl": "www.google.com",
                "MoreInfoUrl": "www.google.com",
                "Properties":["personal"],

            },
            {
                "Id": 3,
                "Title": "Future Growth",
                "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin ornare lectus, quis gravida tortor venenatis nec. ",
                "ImageUrl": "C:/Users/xy57418/Pictures/Anguar Rewrite/PlaceHolder BrandLogos.png",
                "FundsUrl": "www.google.com",
                "OurPeopleUrl": "www.google.com",
                "WhyInvestUrl": "www.google.com",
                "MoreInfoUrl": "www.google.com",
                "Properties": ["institutional"],

            },
            {
                "Id": 4,
                "Title": "Global Emerging Markets",
                "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin ornare lectus, quis gravida tortor venenatis nec. ",
                "ImageUrl": "C:/Users/xy57418/Pictures/Anguar Rewrite/PlaceHolder BrandLogos.png",
                "FundsUrl": "www.google.com",
                "OurPeopleUrl": "www.google.com",
                "WhyInvestUrl": "www.google.com",
                "MoreInfoUrl": "www.google.com",
                "Properties": ["institutional", "personal"],

            },
        ]
    }
}

我的模型如下：

export class Brands {
    Id: number;
    Title: string;
    Description: string;
    ImageUrl: string;
    FundsUrl: string;
    OurPeopleUrl: string;
    WhyInvestUrl: string;
    MoreInfoUrl: string;
    Properties: string[];
}

因此，您可以看到出现的问题是，当我选择m.Properties时，它返回未定义的。我正在使用输入复选框进行过滤。我不确定如何进行。

非常感谢您。

编辑：这是我的输入框代码：

<input type="checkbox" name="Personal" value="Personal" [(ngModel)]="Personal" (change)="checkValue(Personal, property='personal')"/> Personal<br />

那么，当单击输入框时，会将属性添加到数组filteredProperties中。这些是JSON属性中当前正在寻找的属性。

编辑2：

因此，我能够使用@trichetriche答案的一部分，并使用indexOf来获得结果。

我的代码：

this.visibleBrands = this.brands.filter(item => item.Properties.some(property => this.filteredProperties.indexOf(property) > -1));

Answer 1

如果我正确理解它，则您正在尝试检查m.properties中是否至少有一个brand.properties。

如果是这种情况，请按照以下步骤操作：

const data = [{
  "Id": 4,
  "Title": "Global Emerging Markets",
  "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin ornare lectus, quis gravida tortor venenatis nec. ",
  "IUrl": "www.google.com",
  "FUrl": "www.google.com",
  "OUrl": "www.google.com",
  "WUrl": "www.google.com",
  "MUrl": "www.google.com",
  "Properties": ["institutional", "personal"],
}];

const validProperties = ['personal', 'financial'];
const invalidProperties = ['marital', 'governmental'];

console.log(data.filter(item => item.Properties.some(property => validProperties.indexOf(property) !== -1)));
console.log(data.filter(item => item.Properties.some(property => invalidProperties.indexOf(property) !== -1)));

您必须“比较”两个数组：这意味着一个数组必须具有至少一个与另一个数组匹配的元素。

为此，您将首先使用filter：它将删除所有不符合条件的项目。

接下来，您将必须检查Properties数组中的每个项目，并检查该项目是否包含在第二个数组中。

这是通过some完成的，可以这样总结

遍历数组的每个元素；如果一项符合条件，则停止迭代并返回true。

条件是array.includes，我想这是不言而喻的。

Answer 2

您在 getBrands（）中返回的内容：Brands [] 是一个对象数组，因此您必须遍历每个项目，即m[0].Properties, m[1].Properties，依此类推。因此，您应该做的是循环访问m[i].Properties。如果它是单个对象，即{}而没有[{}]，则m.Properties会起作用。我希望我对此很清楚。

如何在Angular 2+中访问JSON字符串数组中的字符串？

2 个答案: