如何以角度 2 或更高角度显示对象内的数组数据答案

【问题标题】：How to Display data of an array within an object in angular 2 or higher如何以角度 2 或更高角度显示对象内的数组数据
【发布时间】：2017-08-29 02:08:45
【问题描述】：

我的数据有 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 方法。它们似乎都不起作用，或者我可能做错了。检索数据的正确方法是什么？谢谢。

【问题讨论】：

Complete this，它会让你对Angular2有一个基本的了解。
已经完成。我只想知道我应该如何在对象中检索数组。你有什么想法吗？tq
因为目前我只能显示一个数据。
如果你已经完成了，你应该知道怎么做。您必须使用循环来显示英雄列表...

标签： arrays angular multidimensional-array ngfor angular-ng-if

【解决方案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" --> 您可以使用它来检查“无数据”条件 (allUserData.office.length > 0)

【讨论】：

嗨，nugu，你的回答很有帮助。我忘了提到，我的 allUserData 不是一个数组（json 会在这里给出一堆数据，所以我会按特定的 ID 搜索，所以假设我选择用户 ID = 1，所以我的 allUserData 将只包含该用户数据。和我应该如何只显示该办公室数据，因为这个用户有 2 个办公室数据，如果我选择另一个用户 ID，他们将有 1 个办公室数据。所以这里很困惑如何检查条件。等待我会更新我的问题）跨度>
哦，没关系。它正在工作。没有更新..呵呵谢谢你nugu
很高兴它有帮助，我不想发布完整的答案，因为应该有一个学习曲线;)

【解决方案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>

【讨论】：