Entfernen Sie ein gerade erstelltes Objekt auf AngularJs

Question

Ich habe eine Liste von Suchanfragen.

search.html:

<ul class="col-xs-12" ng-repeat="search in searchesCtrl.searches"> 
    <li> 
     <a href="#">{{search.url}}</a><button class="btn btn-danger" ng-click="searchesCtrl.deleteSearch(search)">Delete</button> 
    </li> 
</ul> 

<div class="input-group"> 
    <input type="text" class="form-control" ng-model="searchesCtrl.newSearch.name"/> 
    <input type="text" class="form-control" ng-model="searchesCtrl.newSearch.url"/> 
    <span class="input-group-btn"> 
     <a class="btn btn-primary" ng-click="searchesCtrl.addNewSearch()">Go</a> 
    </span> 
</div> 

search.controller.js:

'use strict'; 

(function() { 

class SearchesComponent { 
    constructor($http) { 
    this.$http = $http; 
    this.searches = []; 
    } 

    $onInit() { 
    this.$http.get('/api/searches') 
     .then(response => { 
     this.searches = response.data; 
     }); 
    } 

    addNewSearch() { 
    if (this.newSearch) { 
     this.$http.post('/api/searches', { 
     url: this.newSearch.url, 
     name: this.newSearch.name 
     }).then(() => { 
     this.searches.push(this.newSearch); 
     this.newSearch = ''; 
     }); 
    } 
    } 

    deleteSearch(search) { 
    this.$http.delete('/api/searches/' + search._id) 
     .then(() => { 
     this.searches.splice(this.searches.indexOf(search),1); 
     }); 
    } 
} 

angular.module('myApp') 
    .component('searches', { 
    templateUrl: 'app/searches/searches.html', 
    controller: SearchesComponent, 
    controllerAs: 'searchesCtrl' 
    }); 
})(); 

Wenn ich versuche, eine Suche zu entfernen, die ich habe gerade hinzugefügt, ohne die Seite zu aktualisieren, es funktioniert nicht.
Die ng-click="searchesCtrl.deleteSearch(search)" ruft /api/searches/undefined.

Ich versuche, ohne die $ Index-Lösung zu arbeiten. Ist es möglich ?

Answer 1

Da die neu hinzugefügte search nicht scheint nicht _id Parameter zu haben, da Sie direkt nur schieben sind this.newSearch in searches Array.

Grundsätzlich sollte Ihre neue Post-Methode eine Objekt-Entität zurückgeben, die in der Datenbank & gespeichert wurde, die _id korrekt von Server aufgefüllt haben wird. Drücken Sie als nächstes das neue Entitätsobjekt auf searches Array. Trotzdem empfinde ich diesen Ansatz sehr schlecht, da wir davon ausgehen, dass nur ein Benutzer mit diesem System umgehen wird. Da wir die Verantwortung geben, das Objekt searches nur in Javascript zu aktualisieren.

Hier gehen wir, anstatt Sache lokal zu halten, würde ich sagen, dass Sie erneut aufrufen sollten rufen Sie alle searches holen, die Sie bereits tun $onInit Funktion. So wird sichergestellt, dass die Liste, die Sie auf der Benutzeroberfläche sehen, mit dem Server synchronisiert wird. Sie müssen getSearches Methode aufrufen, wenn Sie Objekt löschen und speichern, was die richtige Vorgehensweise ist.

-Code

class SearchesComponent { 
    constructor($http) { 
    this.$http = $http; 
    this.searches = []; 
    } 

    getSearches(){ 
    this.$http.get('/api/searches') 
     .then(response => { 
     this.searches = response.data; 
     }); 
    } 

    $onInit() { 
    this.getSearches(); //retrieving list of searches from server 
    } 

    addNewSearch() { 
    if (this.newSearch) { 
     this.$http.post('/api/searches', { 
     url: this.newSearch.url, 
     name: this.newSearch.name 
     }).then(() => { 
     this.getSearches(); //asking for list from server 
     }); 
    } 
    } 

    deleteSearch(search) { 
    this.$http.delete('/api/searches/' + search._id) 
     .then(() => { 
     this.getSearches(); //asking for list from server. 
     }); 
    } 
}