Я пытаюсь использовать HTTP-запрос на удаление, чтобы удалить элемент из массива, а затем сделать HTTP-запрос на получение, чтобы получить измененный массив для дальнейшего использования в приложении. Я могу удалить элемент, и он покидает базу данных. Элемент исчезнет, и я могу использовать почтальона, чтобы увидеть, что его больше нет. Приложение не отражает отсутствие до тех пор, пока оно не будет перезагружено. Я вызываю другую функцию внутри функции, которая используется для удаления, и этот удаленный элемент отображается как присутствующий (toggleData). Мне нужно, чтобы приложение обновлялось в режиме реального времени при отображении {{allNouns.length}} на странице spla sh. Я использую httpClientModule и нажмите / concatMap. Я поиграл с async / await и setTimeout, но пока безуспешно.
Моя цель - удалить элемент из базы данных и, следовательно, this.userNouns, прежде чем он попадет в функцию toggleData. Я могу удалить элемент и посмотреть модальное представление refre sh, но текущий счетчик this.userNouns, видимый посредством интерполяции строк на странице, остается неизменным и не будет точным, пока приложение не будет перезагружено.
Только для контекста , this.userNounsHolder - это массив объектов, используемых для панели мониторинга, которая позволяет удалять. this.allNouns - это массив строк, которые отображаются на главной странице. 3 флажка (обрабатываются toggleData) определяют, какие строки находятся в массиве. В ngOninit выполняется множество HTTP-вызовов, но они прекрасно справляются с генерацией и, похоже, не связаны с этой конкретной проблемой. Спасибо за наборы глаз.
В настоящее время я просто пытаюсь получить эту работу для существительных. Нажмите на модальное окно, чтобы увидеть соответствующую информационную панель.
Ссылка на редактор stackblitz: https://stackblitz.com/edit/github-krcuye
Ссылка на API необходима для полной функциональности теста: https://github.com/TSPeterson206/conspiracyAPI
API использует knex, и семена должны быть запущены с помощью: npm run knex seed: run ... из-за элементов, удаляемых по щелчку.
FUNCTION USED TO DELETE
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 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);
}
}