Угловой - Обновить / Получить данные после удаления - PullRequest
Новая
       15

Угловой - Обновить / Получить данные после удаления

0 голосов
/ 19 февраля 2019

Я приземлился на проекте в полете, используя Angular, не зная слишком много об Angular.В настоящее время я работаю над простым экраном CRUD.После удаления строки, как я могу «обновить» пользовательский интерфейс?Вот методы внутри моего компонента: 

    AATList:IAat[];

confirmDelete(): void{
    //this.myService.deleteAAT(this.satNumber).subscribe(data => {this.AATList = data;});
    //this.myService.deleteAAT(this.satNumber).subscribe(() => {this.getAATtEntries(); });
    this.myService.deleteAAT(this.satNumber).subscribe();
    this.getAatEntries();
    this.modalRef.hide();
}

getAATtEntries() {
    console.log("entries");
    this.myService.getAATList().subscribe(data => {this.AATList = data});
}

(добавлено при редактировании, внутри компонента): 

openDeleteModal(template: TemplateRef<any>, satNumber: number) {
    this.satNumber = satNumber;
    this.modalRef = this.modalService.show(template, {class: 'modal-sm'});
  }

Услуги: 

getAATList() {
    return this.httpClient.get<ISmt[]>(environment.ApiEndPoint + '/api/SMTDatas', {withCredentials:true});
}

deleteAAT(satNumber : number) {
    return this.httpClient.delete(environment.ApiEndPoint + '/api/SMTDatas/' + satNumber, {withCredentials:true} )
}

(я используюHttpClient из @angular/common/http для услуг)

Я пробовал первые три строки в методе verifyDelete безрезультатно.Что мне здесь не хватает?Я плохо понимаю Angular, поэтому не стесняйтесь указывать на что-нибудь еще.

ОБНОВЛЕНИЕ: HTML: 

    <a class="text-danger" data-toggle="tooltip" data-placement="top" title="Delete" (click)="openDeleteModal(deleteTemplate, smt.SMTNumber)"><i class="fa fa-trash"></i>Delete</a>
...
    <ng-template #deleteTemplate>
      <div class="modal-body text-center">
        <p>Are you sure you want to delete this SAT?</p>
        <button type="button" class="btn btn-default" (click)="confirmDelete()" >Yes</button>
        <button type="button" class="btn btn-primary" (click)="denyDelete()" >No</button>
      </div>
    </ng-template>

Ответы [ 3 ]

0 голосов
/ 19 февраля 2019

РЕДАКТИРОВАТЬ: Я думаю, что вы закрываете модальное, прежде чем запрос был выполнен.Также предположим, что вы захотите получить список в вашем родительском , а не в модальном.Итак, сначала я бы удалил, спрятал модал, послушал, как модал закрывается в родительском, и там заново извлекаю список ... так что-то вроде: 

this.myService.deleteAAT(this.satNumber).subscribe(() => this.modalRef.hide());

Затем в вашем родителе, слушайте скрытие: 

this.modalService.onHide.pipe(
  switchMap(() => this.myService.getAATList())
).subscribe(data => {this.AATList = data})

ОРИГИНАЛ:

При этом: 

this.myService.deleteAAT(this.satNumber).subscribe();
this.getAatEntries();

getAatEntries() фактически запускается до завершения удаления (скорее всего)таким образом, вам нужно связать эти запросы, вы можете достичь этого с помощью switchMap: 

this.myService.deleteAAT(this.satNumber).pipe(
  switchMap(() => this.myService.getAATList())
)
.subscribe((data: ISmt[]) => this.AATList = data);
0 голосов
/ 21 февраля 2019

Вы можете использовать событие onHidden для модели (которое сработало, когда модальное устройство скрыто от пользователя), чтобы загрузить данные, как показано ниже.

constructor(private modalService: BsModalService) {
    this.modalService.onHidden.subscribe(() => {
         // Fired when the modal has finished being hidden from the user
        this.getAATtEntries();
    });
}

confirmDelete(): void{
    this.myService.deleteAAT(this.satNumber).subscribe(() => { this.modalRef.hide(); });
}
0 голосов
/ 19 февраля 2019

TL; DR: Узнайте о подписках и темах, а также о том, как установить связь между компонентом и службой.Вы можете достичь желаемого, либо сделав запрос GET после успешного выполнения запроса DELETE, либо обновив свой пользовательский интерфейс, локально удалив элемент из списка после выполнения успешного запроса DELETE.

Более длинная версия:

Идея может быть следующей:

Если вы сделаете изменение, которое вы захотите увидеть позже (например, 99,9% приложений), выВы захотите сделать бэкэнд-вызов.

То, как вы обновляете свой вид пользовательского интерфейса, зависит от того, как вы хотите продолжить его, после того, как вы сделали бэкэнд-вызов .

Итак, рассмотрим случай, когда вы удаляете элемент из списка.Вы отправляете запрос на удаление этого конкретного элемента и получаете ответ от бэкэнда.В этом ответе должно быть указано, была ли выполненная вами операция удаления успешной.

На основе этой информации вы можете

1) найти элемент в списке, выполнив итерацию по нему и удалить его.локально (быстрее)

2) сделать еще один GET-запрос к бэкэнду и отобразить недавно обновленный результат после успешного удаления (безопаснее, но в итоге вы делаете 2 запроса для каждой операции).

Вопрос о том, как вы могли бы подойти к вопросу «удаляется ли удаление», зависит от вашей реализации, но я поделюсь одним из них ниже.

Для этого было бы полезно прочитать о Подписки и Субъекты с использованием rxjs .Я напишу, следуя второму варианту, который я упомянул выше.

В службе, в которой вы делаете вызов, вы можете создать тему.Вы будете использовать эту тему, чтобы уведомлять слушателей (то есть, кто подписался на это событие) о любых обновлениях, используя метод next .

В своем сервисе вы можете создать новую тему следующим образом: 

private _deleteOperationSuccessfulEvent$: Subject<boolean> = new Subject();

и создайте для него метод получения следующим образом: 

get deleteOperationSuccessfulEvent$(): Observable<boolean> {
    return this._deleteOperationSuccessfulEvent$.asObservable();
}

Когда вы получите ответ на запрос HTTP DELETE, основанный на успехе или неудаче, вы можете выдать истинное значениеили ложное значение следующим образом: 

this._deleteOperationSuccessfulEvent$.next(true);

Пока мы выдаем информацию, что операция удаления была успешной или нет.

Но никто пока не слушает.Таким образом, в вашем компоненте вы можете создать подписку: 

deleteOperationSuccessfulSubscription: Subscription;

, а в своем методе ngOnInit вы можете подписаться на deleteOperationSuccessfulEvent $, созданный в вашей службе:

this.deleteOperationSuccessfulSubscription = this.yourService.deleteOperationSuccessfulEvent$.subscribe(...stuff will come here...);

(обратите внимание, что мы использовали значение deleteOperationSuccessfulEvent $, а не личное _deleteOperationSuccessfulEvent $.)

Теперь ваш компонент прослушивает событие delete .. вашего сервиса.Нам просто нужно принять меры. 

this.deleteOperationSuccessfulSubscription = this.yourService.deleteOperationSuccessfulEvent$
    .subscribe(isSuccessful => {
        if (isSuccessful === true) { 
            make a GET request and display the returning data, following similar steps to which we followed so far 
        } else {
            delete operation was NOT successful, you can display an error or retry etc.
        }
    });

Дайте мне знать, если у вас есть какие-либо вопросы.

...