Angular HTTP-запрос на удаление, вопрос обновления приложения - PullRequest
Новая
       65

Angular HTTP-запрос на удаление, вопрос обновления приложения

0 голосов
/ 01 апреля 2020

Ссылка на редактор стекаблиц: https://stackblitz.com/edit/github-krcuye

Ссылка на API необходима для полной функциональности теста: https://github.com/TSPeterson206/conspiracyAPI

Использование API Необходимо запустить knex и seed с помощью: npm run knex seed: run ... из-за удаления элементов по щелчку.

Я пытаюсь использовать HTTP-запрос на удаление, чтобы удалить элемент из массив, а затем сделать HTTP-запрос на получение, чтобы получить измененный массив для дальнейшего использования в приложении. Я могу удалить элемент, и он покидает базу данных. Элемент исчезнет, ​​и я могу использовать почтальона, чтобы увидеть, что его больше нет. Приложение не отражает отсутствие до тех пор, пока оно не будет перезагружено. Я вызываю другую функцию внутри функции, которая используется для удаления, и этот удаленный элемент отображается как присутствующий (toggleData). Мне нужно, чтобы приложение обновлялось в режиме реального времени, когда я отображаю {{allNouns.length}} на странице spla sh. Я использую httpClientModule и нажмите / concatMap. Я играл с async / await и setTimeout, но пока не повезло. Любая информация о порядке операций или о том, как лучше всего видеть результаты в реальном времени, будет высоко оценена.

Только для контекста. this.userNounsHolder - это массив объектов, используемых для панели мониторинга, которая позволяет удалять. this.allNouns - это массив строк, которые отображаются на главной странице. 3 флажка (обрабатываются toggleData) определяют, какие строки находятся в массиве. В ngOninit выполняется множество HTTP-вызовов, но они прекрасно справляются с генерацией и, похоже, не связаны с этой конкретной проблемой. Спасибо за наборы глаз.

В настоящее время я просто пытаюсь получить эту работу для существительных. Нажмите на модальное окно, чтобы увидеть соответствующую панель.

ФУНКЦИЯ, ИСПОЛЬЗУЕМАЯ ДЛЯ УДАЛЕНИЯ 

delete(idNum){this.http.delete(`http://localhost:8000/nouns/${idNum}`).pipe(
  concatMap(user => this.http.get(`http://localhost:8000/nouns/${this.user[0].id}`)),
  tap(result => this.userNounsHolder = result)).subscribe(
    this.userNouns = this.userNounsHolder.map(noun => noun.content)
  )
  // console.log('usernouns',this.userNouns, this.allNouns)
  this.toggleData('nouns')
}

HTML, содержащая функцию удаления 

<jw-modal id="custom-modal-1">
  <div id="dashboardTop">
  <h1 class="modalHeader" style="height:100px">Nouns Dashboard</h1>
  <button class="modalClose" (click)="closeModal('custom-modal-1');">X</button>
</div>
<div *ngFor="let noun of userNounsHolder" class="modalLoop">
  <div class="nounLoop">{{noun.content}}</div>
  <button (click)="delete(noun.id)">X</button>
</div>
</jw-modal>

TS функции toggleData 

toggleData(value) {
if(value==='nouns'){
  console.log('hitting toggledata nouns before', this.userNouns);
    let nounpre=[];
    let nounuser=[];
    let nounalluser=[];

    this.nounBooleans[0] ? nounpre = this.stockNouns:null;
    this.nounBooleans[1] ? nounuser = this.userNouns:null;
    this.nounBooleans[2] ? nounalluser = this.onlyUserNouns : null;
    this.allNouns = nounpre.concat(nounuser).concat(nounalluser);
    console.log('hitting toggledata nouns after', this.userNouns);

}

if(value==='verbs'){
  console.log('hitting toggledata verbs');

  let verbpre=[];
  let verbuser=[];
  let verballuser=[];

  this.verbBooleans[0] ? verbpre = this.stockVerbs:null;
  this.verbBooleans[1] ? verbuser = this.userActions:null;
  this.verbBooleans[2] ? verballuser = this.onlyUserVerbs : null;
  this.allVerbs = verbpre.concat(verbuser).concat(verballuser);
}

if(value==='descriptors'){
  console.log('hitting toggledata descriptors');

  let descriptorpre=[];
  let descriptoruser=[];
  let descriptoralluser=[];

  this.descriptorBooleans[0] ? descriptorpre = this.stockDescriptors:null;
  this.descriptorBooleans[1] ? descriptoruser = this.userDescriptors:null;
  this.descriptorBooleans[2] ? descriptoralluser = this.onlyUserDescriptors : null;
  this.allDescriptors = descriptorpre.concat(descriptoruser).concat(descriptoralluser);
}


  }

1 Ответ

0 голосов
/ 04 апреля 2020

Разобрался. Требуется другой подход. Используется async / await и toPromise (), и он работает как задумано. Тем не менее, кое-что узнал об обещаниях и angular и стеке. код используется ниже: 

async delete(idNum,type){
await this.http.delete(`http://localhost:8000/${type}/${idNum}`).toPromise()
if(type==='nouns'){
this.userNouns= await 
this.http.get(`http://localhost:8000/${type}/${this.user[0].id}`).toPromise()
this.userNounsHolder=this.userNouns;
this.userNouns=this.userNouns.map(ele=>ele.content);
}
}
...