Question

嗨，使用angular 6，我需要根据通过服务返回的JSON属性为SELECT渲染OPTION。

我正在使用ngFor进行基本渲染，例如：

<select>
    <ng-container *ngFor="let project of data">
        <ng-container *ngIf="(project.projectItems.length !=0)" >
            <option>{{project.projectName}}</option>
        </ng-container>
    </ng-container>
</select>

这为包含项的项目提供了一个填充的SELECT接口，但尚未作用于数据值。

基本上，我需要根据以下几种情况对数据进行过滤以生成界面：

仅在项目包含项目时渲染OPTION
仅在项目处于活动状态时呈现选项
仅在项目中至少有一项设置为活动状态时显示选项

下面显示了返回JSON，因此我希望看到一个只有2个项目（项目1和项目3）的SELECT：

data = [
    {
        "projectName" : "Project 1",
        "Active" : true,
        "projectItems" : [
            {
                "itemName" : "Item 1",
                "Active" : true
            },
            {
                "itemName" : "Item 2",
                "Active" : false
            }
        ]
    },
    {
        "projectName" : "Project 2",
        "Active" : true,
        "projectItems" : [
            {
                "itemName" : "Item 1",
                "Active" : false
            },
            {
                "itemName" : "Item 2",
                "Active" : false
            }
        ]
    },
    {
        "projectName" : "Project 3",
        "Active" : true,
        "projectItems" : [
            {
                "itemName" : "Item 1",
                "Active" : true
            }
        ]
    },
    {
        "projectName" : "Project 4",
        "Active" : false,
        "projectItems" : [
            {
                "itemName" : "Item 1",
                "Active" : true
            }
        ]
    },
    {
        "projectName" : "Project 5",
        "Active" : true,
        "projectItems" : []
    }
]

Answer 1

尝试一下：

<select>
<ng-container *ngFor="let project of data">
    <ng-container *ngIf="(project.projectItems!.length !=0)" >
        <option>{{project!.projectName}}</option>
    </ng-container>
</ng-container>

我假设您是通过服务访问数据的，因此如果流是异步的，则可能不确定。

Answer 2

您可以在角度组件中预先过滤阵列，因此不必在模板中包括此逻辑。以下是一些符合您3个要求的过滤代码：

项目包含项目
项目处于活动状态
项目中至少有1个项目处于活动状态

这是过滤条件，您可以在下面的代码段中执行它：

dataFiltered = this.data.reduce((accum, item) => {
    if (item.projectItems && item.Active && item.projectItems.some(p => p.Active)) {
      accum.push(item);
    }
    return accum;
  }, []);

data = [
  {
      "projectName" : "Project 1",
      "Active" : true,
      "projectItems" : [
          {
              "itemName" : "Item 1",
              "Active" : true
          },
          {
              "itemName" : "Item 2",
              "Active" : false
          }
      ]
  },
  {
      "projectName" : "Project 2",
      "Active" : true,
      "projectItems" : [
          {
              "itemName" : "Item 1",
              "Active" : false
          },
          {
              "itemName" : "Item 2",
              "Active" : false
          }
      ]
  },
  {
      "projectName" : "Project 3",
      "Active" : true,
      "projectItems" : [
          {
              "itemName" : "Item 1",
              "Active" : true
          }
      ]
  },
  {
      "projectName" : "Project 4",
      "Active" : false,
      "projectItems" : [
          {
              "itemName" : "Item 1",
              "Active" : true
          }
      ]
  },
  {
      "projectName" : "Project 5",
      "Active" : true,
      "projectItems" : []
  }
];

dataFiltered = this.data.reduce((accum, item) => {
  if (item.projectItems && item.Active && item.projectItems.some(p => p.Active)) {
      accum.push(item);
    }
    return accum;
  }, []);
  
console.log(dataFiltered);

此数据不再需要*ngIf。 *ngFor也可以直接放在<option>上。

<select>
    <option *ngFor="let project of dataFiltered">{{ project.projectName }}</option>
</select>

如果您的数据来自API，请在收到此数据时进行过滤。

如果只需要过滤数据中的projectNames，则还可以将其形状更改为名称数组：

names = this.data.reduce((accum, item) => {
    if (item.projectItems && item.Active && item.projectItems.some(p => p.Active)) {
      accum.push(item.projectName);
    }
    return accum;
  }, []);

并将其用于选项：

<select>
    <option *ngFor="let name of names">{{ name }}</option>
</select>

希望有帮助！

基于项目值与ngFor一起使用的角度返回过滤数组

2 个答案: