如何在angular2中使用ngFor

我想在我的一个ng2项目中使用这组数据：

{
  "Administration et gestion": [
    {
        "id": "1_1",
        "text": "Assistance comptable"
    },
    {
        "id": "1_2",
        "text": "Conseil fiscal et impots"
    },
    {
        "id": "1_3",
        "text": "Conseil juridique"
    },
    {
        "id": "1_4",
        "text": "Conseil auto-entrepreneur"
    }
  ],
  "Animaux": [
    {
        "id": "2_1",
        "text": "garde d'animaux"
    },
    {
        "id": "2_2",
        "text": "toitellage"
    }
  ],
  "Enfants": [
      {
          "id": "3_1",
          "text": "baby-sitting"
      },
      {
          "id": "3_2",
          "text": "aides au devoirs"
      }
  ],
}

将这些数据输入ng1很容易，我做了如下工作：

ng-repeat="(key, skill) in skills"

---

但是angular2不支持angular1语法，并且找到的解决方案对我不适用（某些管道）。与随机查找和粘贴内容不同，有人能帮我完全理解我在这里要做什么吗？

您可以为此创建一个自定义管道：

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]);
    }
    return keys;
  }
}

然后像这样使用它：

<div *ngFor="#keyValue of skills | keys">
  <div>{{keyValue.key}}<div>
  <div *ngFor="#value of keyValue.value">
    {{value.id}} = {{value.text}}
  </div>
</div>

有关更多详细信息，请参见此问题：

---

您可以为此创建自定义管道：

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]);
    }
    return keys;
  }
}

然后像这样使用它：

<div *ngFor="#keyValue of skills | keys">
  <div>{{keyValue.key}}<div>
  <div *ngFor="#value of keyValue.value">
    {{value.id}} = {{value.text}}
  </div>
</div>

有关更多详细信息，请参见此问题：

---

hi thierry的可能副本，谢谢您的快速回答，因此管道对keyValue.key很有效，但对value.text或id似乎不起作用，keyValue中的项目数是对的，但我有一个空白项目请看哦！我的代码中有一个输入错误：

而不是

。我更新了我的答案…已经更正了你的打字错误，项目的数量是正确的，但是值是空的。你能试试

{{value{json}}

而不是

{{{value.id}}={{{value.text}

来查看

值

对象的内容吗？我使用

{value{json}}

时它也是空的。嗨，谢谢你的快速回答，所以这个管道对keyValue.key很有效，但对value.text或id似乎不起作用，keyValue中的项目数是正确的，但我有一个空白项目，请看哦！我的代码中有一个输入错误：

而不是

。我更新了我的答案…已经更正了你的打字错误，项目的数量是正确的，但是值是空的。你能试试

{{value | json}}

而不是

{{value.id}={{{value.text}

来查看

值

对象的内容吗？当我使用

{value | json}

时，它也是空的