ng2: Reserve Ursprünglicher Wert, wenn die Validierung fehlgeschlagen ist

Question

Ich versuche, den Benutzer zu zwingen, die Beschreibung, wenn sie ein Element zu aktualisieren. Es wird validiert, zeigt eine Fehlermeldung an, wenn die Validierung fehlschlägt, beendet die Ausführung und aktualisiert ein Element nicht.

entnehmen Sie bitte der Reihe Screenshot unten:

Allerdings ist mein Element noch aktualisiert, auch wenn die Überprüfung fehlschlägt. Es scheint mir, dass, da ein Objekt Referenz im Speicher ist, es immer noch aktualisiert wird, auch wenn es keine updateTodo() Methode von der Todoservice läuft.

Liegt es daran, dass ich meine Artikel nur zum Testen fest codiere? Ich bin Angular sehr neu und möchte WebAPIs zu diesem Zeitpunkt noch nicht implementieren.

Ich versuchte Object.assign({}, copy) in getTodoItem(id: number) zu verwenden, um mein todoItem von der Liste zu klonen und zu entkoppeln, aber die Fehlermeldung, die zeigt, dass es nicht beobachtbar ist.

Wie kann ich die Werte von Objekten in der Liste beibehalten, wenn die Validierung fehlschlägt? In der realen Anwendung, da wir die Daten aus der Datenbank (oder dem Webapi-Cache) abrufen, wenn die Index-/Listenkomponente navigiert wird, sollte dieses Problem nicht auftreten. Ist meine Annahme richtig?

todoService.ts

import { Itodo } from './todo' 

const TodoItems: Itodo[] = [ 
    { todoId: 11, description: 'Silencer' }, 
    { todoId: 12, description: 'Centaur Warrunner' }, 
    { todoId: 13, description: 'Lycanthrope' }, 
    { todoId: 14, description: 'Sniper' }, 
    { todoId: 15, description: 'Lone Druid' } 
] 

@Injectable() 
export class TodoService { 

    getTodoItems(): Observable<Itodo[]> { 
     return Observable.of(TodoItems); 
    }  

    getTodoItem(id: number): Observable<Itodo> { 
     return this.getTodoItems() 
      .map((items: Itodo[]) => items.find(p => p.todoId === id)); 

     //let copy = this.getTodoItems() 
     // .map((items: Itodo[]) => items.find(p => p.todoId === id)); 

     //return Object.assign({}, copy); 
    } 

    addNewTodo(model: Itodo): number { 
     return TodoItems.push(model); // return new length of an array 
    } 

    updateTodo(model: Itodo) : number { 
     let idx = TodoItems.indexOf(TodoItems.filter(f => f.todoId == model.todoId)[0]);   
     return TodoItems.splice(idx, 1, model).length; // return the count of affected item 
    } 
} 

todo-edit.component.ts - EditItem() ist die Haupt

import { Subscription } from 'rxjs/Subscription'; 

import { Itodo } from './todo' 
import { TodoService } from './todo.service'; 

@Component({ 
    moduleId: module.id, 
    templateUrl: "todo-edit.component.html" 
}) 
export class TodoEditComponent implements OnInit, OnDestroy { 
    todoModel: Itodo; 
    private sub: Subscription; 

    Message: string; 
    MessageType: number; 

    constructor(private _todoService: TodoService, 
     private _route: ActivatedRoute, 
     private _router: Router) { 
    } 

    ngOnInit(): void { 
     this.sub = this._route.params.subscribe(
      params => { 
       let id = +params['id']; 
       this.getItem(id); 
      }); 
    } 

    ngOnDestroy() { 
     this.sub.unsubscribe(); 
    } 

    getItem(id: number) { 
     this._todoService.getTodoItem(id).subscribe(
      item => this.todoModel = item, 
      error => this.Message = <any>error); 
    } 

    EditItem(): void { 

     this.todoModel.description = this.todoModel.description.trim(); 
     if (!this.todoModel.description) { 
      this.Message = "Description must not be blank."; 
      this.MessageType = 2; 
      return; 
     } 

     console.log('valid: update now.'); 
     let result = this._todoService.updateTodo(this.todoModel); 

     if (result > 0) { 
      this.Message = "An Item has been updated"; 
      this.MessageType = 1; 
     } 
     else { 
      this.Message = "Error occured! Try again."; 
      this.MessageType = 2; 
     } 
    } 
} 

Arbeitslösung

Object.assign es die richtige ist Methode zu verwenden. Ich benutzte es fälschlicherweise im Dienst, um es zu klonen. Sie müssen es in Ihrer Komponente verwenden, nicht im Dienst.

getItem(id: number) { 
     //Object.assign clone and decouple todoModel from the ArrayList 
     this._todoService.getTodoItem(id).subscribe(
      item => this.todoModel = Object.assign({}, item), 
      error => this.Message = <any>error); 

    } 

Answer 1

Validierung nicht daran hindert, Produkte zu aktualisieren, überprüft er nur die tatsächlichen Werte für Gültigkeit. Sie sollten eine Kopie des zu bearbeitenden Objekts erstellen, um Änderungen rückgängig machen zu können. Sie können Object.assign({}, item) oder JSON.parse(JSON.stringify(...)) verwenden.