如何在角度组件中绑定任何特定的对象属性答案

【问题标题】：How to bind any patricular object property in angular component如何在角度组件中绑定任何特定的对象属性
【发布时间】：2018-06-08 17:38:29
【问题描述】：

我是 Angular 1.6 组件架构的新手，遇到了一个简单的问题。我有一个 src 对象，其中有两个属性，即name 和age。现在，我想要的是在 html 中绑定 name 属性。

The following is the code:

test.js:-

$ctrl.src = {
    details: [
      { Id: 1, Name: "Test1", Address: "Add1" },
      { Id: 2, Name: "Test2", Address: "Add2" }
    ]
  };

test.html:-

    <cell-component>Hi {{Name}}</cell-component>


Expected Output:-

    Hi test

【问题讨论】：

标签： javascript angularjs components angular1.6

【解决方案1】：

当您需要访问特定对象的属性时，您应该使用点运算符，如下所示

<cell-component>Hi {{src.Name}}</cell-component>

编辑

随着您的修改细节是一个数组，您需要在其中指定要显示的索引

 <cell-component>Hi {{src.details[0].Name}}</cell-component>

【讨论】：

【解决方案2】：

由于$scope.src 指的是具有两个属性的对象，因此角度模型绑定总是需要像这样在视图中指定对象键以及对象名称

  {{src.Name}} //renders $scope.src.Name
  {{src.Age}} //renders $scope.src.Age

所以你的视图需要改为

<cell-component>Hi {{src.Name}}</cell-component>

还有另一种方法可以访问属性并将它们呈现在视图中。

  {{src['Name']}} //renders $scope.src.Name
  {{src['Age']}} //renders $scope.src.Age

导致

 <cell-component>Hi {{src['Name']}}</cell-component>

【讨论】：

投反对票的人解释投反对票的原因。这里的人真的很糟糕。

【解决方案3】：

您可以做的一件简单的事情是您只需将 ng-repeate 放在 src.details 上并打印其中的每个对象。 IE。 <div ng-repeate="obj in src.details"><div>{{obj.Name}}</div> </div>

【讨论】：

【解决方案4】：

首先，您必须将 src 对象放在作用域上，才能将其作为表达式显示。

'src' 是一个具有名为 'details' 的属性的对象，它本身就是一个对象数组。所以你必须根据对象层次结构向下获取属性'Name'的值。但是 'Name' 是 'details' 下的一个属性，它是一个数组，因此您必须使用 ng-repeat 对其进行迭代或简单地指定数组索引。

var app = angular.module('app',[]);
app.controller('ctrl', function($scope){
  $scope.src = {
    details: [
      { Id: 1, Name: "Test1", Address: "Add1" },
      { Id: 2, Name: "Test2", Address: "Add2" }
    ]
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    <h3>Hi {{src.details[0].Name}}</h3>
    <h3>Hi {{src.details[1].Name}}</h3>
    
    <h3 ng-repeat="obj in src.details">Hi {{obj.Name}}</h3>
  </div>
</div>

【讨论】：