Próbuję zbudować na kątowym samouczkach "bohaterów" (jak wielu!), Gdzie robię proste operacje Crud na liście obiektów https://angularny.io/Tutorial/toh-pt3 i komponent Edycja obiektu pojawia się na tej samej stronie, co komponent listy obiektowych, a usługa obiektów odpoczywa na połączenia, aby włączyć to wszystko.

<h2>Groups</h2>
<ul class="groups">
  <li *ngFor="let group of groups"
    [class.selected]="group === selectedGroup"
    (click)="onSelect(group)">
    {{group.name}}
  </li>
</ul>
<app-group-detail [group]="selectedGroup">

</app-group-detail>

App-Group-detail:

<div *ngIf="group">    
  <h2>{{group.name | uppercase}} Detail</h2>
  <div>
    <label>name:
      <input [(ngModel)]="group.name" placeholder="name"/>
    </label>
    <button (click)="save()">save</button>
  </div>
</div>

Teraz moje dzieła "oszczędzaj", i na sukces, nie ma nic do roboty: zarówno obiekt wyświetlany na liście (według nazwy), jak i obiektu w komponencie Edytuj element Element, a następnie dane w DB są zsynchronizowane.

Ale potem wystąpił błąd od połączenia reszty, staram się wypracować najwięcej podejścia kątowe . Obecnie, jeśli odpocząć błędy, mam tę sytuację:

  • Pokażę błąd
  • Dane w obiekcie "Edytuj element" jest nieprawidłowy i muszą być modyfikowane lub odrzucone
  • Dane w komponencie "listy" są nieprawidłowe, ponieważ jest również związany z obiektem za pomocą jego odniesienia do niego w tablicy bazowej.

Teraz, gdyby był w porządku, jeśli użytkownik kliknie przycisk "Anuluj", ale mogą również poruszać się z wybranego elementu na liście, wybierając inny.

Jakie jest najlepsze podejście?

Nie zezwalaj na kliknięcie i egzekwowanie przycisku Anuluj?

Cicho porzuć edycje, przywracając oryginalne wartości? (Przechowuję kopię w komponencie Edycja)

Przykład pokazuje przy użyciu this.location.back(), ale nie widzę, jak to działało, ponieważ moje połączenie remis nie powoduje nowej ładowania strony, które mogłem porzucić.

0
Adam 26 luty 2019, 17:06

2 odpowiedzi

Najlepsza odpowiedź

Powiedziałbym, że zależy to od implementacji Twojego rodziców. W przypadku, gdy rodzic i dziecko są zupełnie innymi widokami, nie musisz się martwić o niezapisane zmiany, możesz po prostu rozwiązać ten problem, odświeżając widok nadrzędny na {x0}} i ponownie pobierają dane, co jest dobrą praktyką Prawdziwe scenariusze (również mogą istnieć wielu użytkowników zmieniających dane), dzięki czemu zawsze masz zaktualizowane dane. Ale jeśli rodzic jest widoczny obok dziecka, a rodzic nie może zostać odświeżony (utrata wybranego skupienia rzędu itp.) Możesz uzyskać twardą kopię danych w widoku dziecka i pracować z kopią i gdy połączenie API pomyślnie oszczędza Dane na serwerze aktualizujesz Input() element składnika dziecka z zwracanym obiektem z API. app-group-detail.ts

  @Input() inputModel: DetailModel;
  localCopy: DetailModel;
ngOnChanges() {
    this.localCopy = JSON.parse(JSON.stringify(this.inputModel)); // or any other copy you like

    }
    save(){
    //call API to update using  this.localCopy 

    this.inputModel = // if call was successful get the reply object and put it in input
// Or better to use eventEmitters to send the object to the parent to be replaced 
// or just use eventemitters to notify the parent that it needs to be refreshed
    }
    
    
    
localCopy app-group-detail.html

W przypadku, gdy chcesz użyć eventEmitter, należy zdefiniować emiter wydarzenia w app-group-detail.ts. Poniżej znajdują się dwa podejścia, których można użyć:

  1. Emituj wydarzenie z dziecka tylko ze względu na powiadomienie rodzica, który musi odświeżyć listę. Po pierwsze, musisz zdefiniować emiter wydarzenia w dziecko za pomocą
import {  EventEmitter } from '@angular/core';
@Output() public updateEventEmitter = new EventEmitter();
// then emit this event when API call is successful to notify parent
save(){
   //API call to update resource and on successful case
   this.updateEventEmitter.emit();
 }
<app-group-detail (updateEventEmitter)="updateList()" [group]="selectedGroup">

</app-group-detail>
parent.ts updateList()
  1. Możesz użyć tego samego wzoru, ale wysyłając object zaktualizowanego zasobu z dziecka do rodzica, więc rodzic zastępuje go (w przypadku tego), po prostu chcesz wyjaśnić, jak wygląda wzorzec. (Dokładnie jak powyżej, ale z niewielkimi różnicami).
import { EventEmitter } from '@angular/core';
@Output() dataUpdatedEventEmitter: EventEmitter<DataModel> = new EventEmitter();

save(){
// CALL API TO UPDATE
// On success emit the returned object
this.dataUpdatedEventEmitter.emit(objectToBeEmitted);
}

Oraz w pliku Domu Domint:

<app-group-detail (dataUpdatedEventEmitter)="updateListWithItem($object)" [group]="selectedGroup">

</app-group-detail>
1
Thriller 26 luty 2019, 17:05

Myślę, że najlepszym podejściem jest powiązanie kopii obiektu do {x0}} składnika, ponieważ istnieją wiele przypadków, które mogą powodować błąd (jak połączenie internetowe).

Więc podczas edycji obiektu należy zadzwonić edit api i powiedz rodzica (lista), aby odświeżyć się. Po tym komponent list Przypisuje swoje API i odświeży swoje przedmioty.

0
Nour 26 luty 2019, 16:02