ui-router untergeordneter Status nicht in der Lage, auf Elternstatusdaten zuzugreifen

Question

Eine untergeordnete Statuskomponente in ui-router hat Probleme beim Lesen der Elterndaten. Beim Loggen der $stateParams zeigt es die korrekten Informationen an. Diese Daten werden als Parameter an das Attribut ui-sref übergeben, was dazu führen sollte, dass dem Benutzer die korrekten Informationen angezeigt werden, dies jedoch nicht.

Hier wird die Artikel-ID protokolliert (je nachdem, auf welchen Artikel geklickt wird).

Warum das Kind Zustand patents.patent es nicht die Daten von übergeordnetem Zustand patents zu lesen?

var app = angular.module('myApp', ['ui.router']); 

app.config(['$stateProvider', function($stateProvider) { 

    var states = [ 
     { 
      name: 'patents', 
      url: '/patents', 
      component: 'patents', 
      resolve: { 
       patents: function(patentsService) { 
        return patentsService.fetchAllPatents(); 
       } 
      } 
     }, 
     { 
      name: 'patents.patent', 
      url: '/{patentId}', 
      component: 'patent', 
      resolve: { 
       patent: function(patents, $stateParams) { 
        return patents.find(function(patent){ 
         return patent.id === $stateParams.patentId; 
        }) 
       } 
      } 
     } 
    ] 

    states.forEach(function(state) { 
     $stateProvider.state(state); 
    }); 

}]); 

---

app.service('patentsService', function($http) { 

    var service = { 

     fetchAllPatents: function() { 
     return $http.get('http://localhost:8080/Sprint002b/restpatent/', {cache: true}).then(function(resp){ 
        return resp.data 
      }); 

     } 
    }; 

    return service; 

}); 

Komponenten

angular.module('myApp').component('patents', { 
    bindings: { patents: '<' }, 
    template: ' <div>' + 
        '<div>' + 
         '<table>' + 
          '<thead>' + 
           '<tr>' + 
            '<td>Application No. </td>' + 
            '<td>Client Ref</td>' + 
            '<td>Cost now</td>' + 
            '<td>Cost band end</td>' + 
            '<td>Cost next</td>' + 
            '<td>Renewal Date</td>' + 
           '</tr>' + 
          '</thead>' + 
          '<tbody>' + 
           '<tr ng-repeat="patent in $ctrl.patents">' + 
            '<td><a ui-sref="patents.patent({patentId: patent.id})" ng-bind="patent.applicationNumber"></a></td>' + 
            '<td ng-bind="patent.clientRef"></td>' + 
            '<td ng-bind="patent.currentRenewalCost">$</td>' + 
            '<td ng-bind="patent.costBandEndDate"></td>' + 
            '<td ng-bind="patent.renewalCostNextStage"></td>' + 
            '<td ng-bind="patent.renewalDueDate"></td>' + 
           '</tr>' + 
          '</tbody>' + 
         '</table>' + 
         '<div ui-view></div>' + 
        '</div>' + 
       '</div>' 
}); 

---

angular.module('myApp').component('patent', { 
    bindings: { patent: '<' }, 
    template: '<h3>A patent!</h3>' + 

      '<div><p>Name: {{$ctrl.patent.id}}</p></div>' + 
      '<div><p>Id: {{$ctrl.patent.applicationNumber}}</p></div>' + 
      '<div><p>Company: {{$ctrl.patent.clientRef}}</p></div>' + 

      '<button ui-sref="people">Close</button>' 
}); 

UPDATE

Ich konnte den untergeordneten Status mit Daten füllen, aber nur das erste Element innerhalb des JSON-Objekts.

Ich habe die Daten innerhalb meiner resolve Eigenschaft in meiner Konfigurationsdatei geändert. Daten werden geladen, ändern sich jedoch nicht, wenn das Element ausgewählt ist.

Irgendwelche Ideen, was ich tun soll? Das ist alles in einem plunkr Arbeits https://plnkr.co/edit/jbZgIg?p=preview

{ 
    name: 'patents.patent', 
    url: '/{patentId}', 
    component: 'patent', 
    resolve: { 
     patent: function(patents, $stateParams) { 
     return patents.find(function(patent){ 
     return $stateParams; // changed from patent.id === $stateParams.patentId 
     }) 
    } 
    } 
} 

Answer 1

Es war unten einen strikten Gleichheitsoperator zu verwenden, anstatt gleich. Also der Code ist jetzt:

{ 
    name: 'patents.patent', 
    url: '/{patentId}', 
    component: 'patent', 
    resolve: { 
    patent: function(patents, $stateParams) { 
    return patents.find(function(patent){ 
     return patent.id == $stateParams.patentId; //not === operator 
     }) 
    } 
    } 
}