オブジェクトをコンポーネントコントローラから角度1.5で表示することができません

Question

コンポーネントコントローラからオブジェクトをバインドして、サービスからの応答を表示するシナリオがあります。

私はhtmlでそのオブジェクトをバインドするとき、私は初期化した空のオブジェクトとしてバインドしています。しかし、応答を得た後は更新されません。

スクリプト：

(function() { 
     app.component('tabComponent', { 
      bindings: { 
       toggle: '<', 
       oUserDetails: '<' 
      }, 
      templateUrl: 'components/tabComponent/tabComponent.html', 
      controller: tabComponentCtrl 
     }) 

     function tabComponentCtrl(mainService) { 
      this.emailPattern = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/; 
      this.phNumberPattern = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/; 
      this.namePattern = /^[a-zA-Z ]{1,15}$/; 
      this.aEmployeeTypes = ["option1", "option2", "option3", "xyz", "abc", "lmn"]; 
      this.toggle = true; 
      this.oUserDetails = {}; 
      /* for getting json data*/ 
      mainService.fnGerUserDetails().then(function(response) { 
       this.oUserDetails = response; 
       console.log(this.oUserDetails); //response 
      }, function(response) { 
       alert('error') 
      }); 
      console.log(this.oUserDetails); //{} 
      /* for updating data to read only form*/ 
      this.fnSendData = function() { 
       this.toggle = true; 
      }; 
     } 
    })(); 

HTML：

<md-content class="tabs-color"> 
    <md-tabs md-dynamic-height="" md-border-bottom=""> 
     <!-- for first tab --> 
     <md-tab label="Tab1"> 
      <md-content class="md-padding"> 
       <img src="{{$ctrl.oUserDetails.img}}" height="200px" width="200px"> 
       <div layout="column"> 
        <form name="userForm" data-ng-submit="$ctrl.fnSendData()"> 
         <md-input-container class="md-block"> 
          <label>Name:</label> 
          <input type="text" name="userName" ng-model="$ctrl.oUserDetails.name" ng-pattern="$ctrl.namePattern" ng-readonly="$ctrl.toggle" required> 
          <div ng-messages="userForm.userName.$error"> 
           <div ng-message="required">UserName is required.</div> 
           <div ng-message="pattern">Must be maximum 15 characters only</div> 
          </div> 
         </md-input-container> 
         <md-input-container class="md-block"> 
          <label>Email:</label> 
          <input type="email" name="userEmail" ng-model="$ctrl.oUserDetails.email" ng-pattern="$ctrl.emailPattern" ng-readonly="$ctrl.toggle" required> 
          <div ng-messages="userForm.userEmail.$error"> 
           <div ng-message="required">Email is required.</div> 
           <div ng-message="pattern">Email Is Invalid</div> 
          </div> 
         </md-input-container> 
         <md-input-container class="md-block"> 
          <label>Phone Number:</label> 
          <input type="text" name="phNumber" ng-model="$ctrl.oUserDetails.phoneNumber" ng-pattern="$ctrl.phNumberPattern" ng-readonly="$ctrl.toggle" required> 
          <div ng-messages="userForm.phNumber.$error"> 
           <div ng-message="required">Phone Number is required</div> 
           <div ng-message="pattern">Must be a valid 10 digit phone number</div> 
          </div> 
         </md-input-container> 
         <md-input-container class="md-block"> 
          <label>Location:</label> 
          <input type="text" name="location" ng-model="$ctrl.oUserDetails.location" ng-readonly="$ctrl.toggle" ng-pattern="$ctrl.namePattern"> 
         </md-input-container> 
         <label class="label">Employee Type:</label> 
         <md-select ng-model="$ctrl.oUserDetails.employmentType" class="md-no-underline" ng-disabled="$ctrl.toggle" md-selected-text="$ctrl.fnGetSelectedText()"> 
          <md-optgroup label="$ctrl.aEmployeeTypes"> 
           <md-option data-ng-repeat="type in $ctrl.aEmployeeTypes" value="{{type}}">{{type}}</md-option> 
          </md-optgroup> 
         </md-select>{{text}} 
         <md-input-container class="md-block" ng-if="$ctrl.oToggle.showOrg"> 
          <label>Organization:</label> 
          <input type="text" name="organization" ng-model="$ctrl.oUserDetails.organization" ng-readonly="$ctrl.toggle" required> 
          <div ng-messages="userForm.organization.$error"> 
           <div ng-message="required">Organization is required</div> 
          </div> 
         </md-input-container> 
         <md-input-container class="md-block" ng-if="$ctrl.oToggle.showExp"> 
          <label>Experiance:</label> 
          <input type="text" name="location" ng-readonly="$ctrl.toggle" ng-model="$ctrl.oUserDetails.yearsOfExperiance" required> 
          <div ng-messages="userForm.location.$error"> 
           <div ng-message="required">Location is required</div> 
          </div> 
         </md-input-container> 
         <md-input-container class="md-block" ng-if="$ctrl.oToggle.showOther"> 
          <label>Others:</label> 
          <input type="text" name="others" ng-readonly="$ctrl.toggle" ng-model="$ctrl.oUserDetails.employmentType" required> 
          <div ng-messages="userForm.others.$error"> 
           <div ng-message="required">Others is required</div> 
          </div> 
         </md-input-container> 
         <md-button type="submit" class="md-primary" aria-label="Save Data" ng-readonly="$ctrl.toggle">Send</md-button> 
        </form> 
       </div> 
      </md-content> 
     </md-tab> 
    </md-tabs> 
</md-content> 

JSON：ここ

{ 
    "status": 200, 
    "msg": "user details", 
    "devMsg": "token expired.", 
    "data": { 
     "img": "https://image.freepik.com/free-icon/user-image-with-black-background_318-34564.png", 
     "name": "xyz", 
     "email": "xyz@gmail.com", 
     "employmentType": "option2", 
     "phoneNumber": "", 
     "location": "Hyderbad", 
     "yearsOfExperiance": 5, 
     "organization": "abc" 
    } 
} 

$ctrl.oUserDetailsではなく、その応答の{}として結合されます。

Answer 1

「this」コールバック関数を使用しているため、問題が発生していると思います。ここで ：

mainService.fnGerUserDetails().then(function(response) { 
       this.oUserDetails = response;// here 'this' is callback function 
       console.log(this.oUserDetails); //response 
      } 

ので、この（別名「文脈」）は、各関数内の特別なキーワードであり、その値は関数が呼び出されたかに依存して、いないか/とき/それが定義された場所。他の変数と同様に、レキシカルスコープの影響を受けません。

これを試してください。

function tabComponentCtrl(mainService) { 
      var that = this; 
      this.emailPattern = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/; 
      this.phNumberPattern = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/; 
      this.namePattern = /^[a-zA-Z ]{1,15}$/; 
      this.aEmployeeTypes = ["option1", "option2", "option3", "xyz", "abc", "lmn"]; 
      this.toggle = true; 
      that.oUserDetails = {}; 
      /* for getting json data*/ 
      mainService.fnGerUserDetails().then(function(response) { 
      that.oUserDetails = response; // assigning response to new variable. 

      }, function(response) { 
       alert('error') 
      }); 

      console.log(that.oUserDetails); //{} 
      /* for updating data to read only form*/ 
      this.fnSendData = function() { 
       this.toggle = true; 
      }; 
     } 

編集： 使用ES6構文：

mainService.fnGerUserDetails().then((response)=> { 
       this.oUserDetails = response; 
       console.log(this.oUserDetails); //response 
      }