如何在 angular 2 或更高版本中显示对象内数组的数据

Question

我的数据有2个办公室，另一个有1个办公室

     "id": "1",
  "username": "test",
  "groups": "Admin",
  "office": [
    {
      "officeid": "2",
      "officename": "moon"
    },
    {
      "officeid": "3",
      "officename": "stars"
    }
  ]
},         "id": "2",
  "username": "john",
  "groups": "guest",
  "office": [
    {
      "officeid": "2",
      "officename": "moon"
    }
  ]
}

我想将办公室显示到文本框。如果数据有 1 个办公室，我应该只显示一个显示办公室名称的文本框，如果数据有 2 个办公室，我应该在一个文本框中显示 2 个办公室。

                   <div class="form-group row">
                    <label class="col-md-2 control-label" for="text-input">Office</label>
                    <div class="col-md-4">
                        <label class="form-control underline"> {{(allUserData.office == "" ? "--No data--" : allUserData.office)}} </label>
                    </div>
               </div>

我应该如何在 html 中显示它？以上是我目前的html。我试图查看其他 *ngFor 方法。它们似乎都不起作用，或者我可能做错了。检索数据的正确方法是什么？谢谢。

Answer 1

首先提供的JSON结构有一些错误，给出的是正确的版本

[
  {
  "id": "1",
  "username": "test",
  "groups": "Admin",
   "office": [
    {
      "officeid": "2",
      "officename": "moon"
    },
    {
      "officeid": "3",
      "officename": "stars"
    }
  ]
  },
  {
  "id": "2",
  "username": "john",
  "groups": "guest",
  "office": [
    {
      "officeid": "2",
      "officename": "moon"
    }
  ]
  }
]

假设您已通过某种服务正确检索到 json 结构。

假设 allUserData 代表给定时间的单个用户。（如果没有，则需要使用*ngFor）

"office"是一个数组，它可以有多个office对象，分别有两个属性"officeid"，"officename"。

假设您想访问给定用户的第一个办公室对象的办公室名称，您应该这样做 "allUserData.office[0].officename"

检查给定用户有多少个办公室 "allUserData.office.length" --> 您可以使用它来检查 "no data" 条件 (allUserData.office.length > 0)

Answer 2

首先，您在原始问题中提出的 json 格式不正确，下面我相信我已更正它。

当使用 Angular 时，您必须定义一个 module 和一个 controller 完成后，您可以使用 ng- 指令与车把 {{ }}。更具体地回答你要循环遍历一个数组的问题，你会使用 ng-repeat 所以例如，如果你的数组是 users 你可以做类似 ng-repeat="user in users" 的事情，然后在你下面的元素中可以使用句柄来调用当前用户的属性，例如{{user.username}}。请参阅下面的完整示例

data = [{"id": "1",
  "username": "test",
  "groups": "Admin",
  "office": [
    {
      "officeid": "2",
      "officename": "moon"
    },
    {
      "officeid": "3",
      "officename": "stars"
    }
  ]
},
{"id": "2",
  "username": "john",
  "groups": "guest",
  "office": [
    {
      "officeid": "2",
      "officename": "moon"
    }
  ]
}];

var myapp = angular.module('myApp',[]);
myapp.controller('myCtrl', function($scope){
 $scope.users = data;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="form-group row" ng-repeat="user in users">
    <lable class="col-md-2 control-label" for="text-input">username</lable>
    <input type="text" name="username-{{user.id}}" value="{{user.username}}" /><br/>
    <label class="col-md-2 control-label" for="text-input">user group</label>
    <input type="text" name="usergroup-{{user.id}}" value="{{user.groups}}" /><br/>
    <div class="col-md-4" ng-repeat="office in user.office">
      <label class="form-control underline">officename-{{office.officeid}}</label>
      <input type="text" name="officename-{{office.officeid}}" value="{{office.officename}}" /><br/>
    </div>
  <hr/><!--just for no css example to split users-->
  </div>
  
</div>

如何在 angular 2 或更高版本中显示对象内数组的数据

How to Display data of an array within an object in angular 2 or higher

arrays

multidimensional-array

angular-ng-if

ngfor

angular