Question

示例：

我有以下对象：

{
  "Person": {
    "Name": {},
    "Hobbies": {
      "0": {
        "Description:Soccer": {},
        "IsActive:false": {}
      },
      "1": {
        "Description:Hockey": {},
        "IsActive:false": {}
      },
      "2": {
        "Description:Tennis": {},
        "IsActive:true": {}
      }
    }
  }
}

我想循环遍历数组并检查任何业余爱好是否活跃。如果是这样，它应该返回true，并显示图像。

<img [src]="Person.Hobbies != null ? './images/hobby.png' : ''"/>

我希望图片只显示一次。

是否可以使用html？

Answer 1

您可以使用ngFor循环，以在数组中显示所有内容。

js.executeScript("arguments[0].scrollIntoView(true);", element);

然后为列表中的每个爱好添加ngIf条件，如果有任何特定原因您只想显示子集。

实施例

<img [src]='./images/hobby.png' *ngFor="let hobby in Person.Hobbies"> </img >

Answer 2

我会在你的Component中设置一个属性

<img *ngIf="showHobbyImg">

this.showHobbyImg = false;

const hobbies = this.person.Person.Hobbies;
for (key in hobbies) {
  if (hobbies["IsActive:true"]) {
    this.showHobbyImg = true;
    break;
  }
}

如果您正在使用lodash，可以稍微简化一下：

this.showHobbyImg = _.some(this.person.Person.Hobbies, ['IsActive:true', {}]);

Angular2模板html循环数组返回true的false

2 个答案: