Delete option for user if he is the owner of the perticular property - html

Question

I want to show delete option for a user if he has created perticular exhibit. I am getting a current user id from getCurrentUser service and i am getting an array of exhibits in which thre is a field "userId".
I am trying to match id of the current user and userId from Exhibits array in such a way that if there is a match, then only user will get delete option for perticular exhibit but I am unable to do it in proper way.
Below is my code:
-------------------------------------------------------------------------------
ngOnInit() {
this.getCurrentUser();
this.getIsSupervisor();
this.spinnerService.show();
let allRoutesOption = Route.emptyRoute();
allRoutesOption.title = 'ALL';
this.routes = [allRoutesOption];
this.getAllExhibits();
this.routeService.getAllRoutes(1, 100)
.then(
data => this.routes = this.routes.concat(data.items)
).catch(
error => console.error(error)
);
this.getPage(1);
}
ngOnDestroy() {
this.spinnerService.hide();
}
getIsSupervisor() {
this.supervisorGuard.isSupervisor().then(
(response: boolean) => {
this.isSupervisor = response;
});
}
getCurrentUser() {
this.userService.getCurrent()
.then(
(response) => {
this.currentUserId = response.id;
this.exhibitService.getAllExhibits(1, this.maxNumberOfMarkers)
.then(
(data) => {
this.allExhibits = data.items;
for (let exhibit of this.allExhibits) {
this.exhibitsUserIds.push(exhibit.userId);
if (this.exhibitsUserIds !== this.currentUserId) {
this.canDelete = false;
} else {
this.canDelete = true;
}
}
}
);
}
);
}
-------------------------------------------------------------------------------
My Html:
----------------------------------------
<md-nav-list>
<md-list-item [routerLink]="['/mobile-content/exhibits/view', exhibit.id]" ng-blur="true" *ngFor="let exhibit of exhibits | paginate: { id: 'server',
itemsPerPage: exhibitsPerPage,
currentPage: currentPage,
totalItems: totalItems }">
<img md-list-avatar *ngIf="previewsLoaded && previews.has(exhibit.id); else exhibitIcon" [src]="previews.get(exhibit.id)"
alt="{{ 'image preview' | translate }}" [ngStyle]="{'width.px': 48, 'height.px': 48}">
<ng-template #exhibitIcon>
<md-icon md-list-icon class="type-icon" [ngStyle]="{'font-size.px': 40, 'height.px': 40, 'width.px': 40}">place</md-icon>
</ng-template>
<h2 md-line>{{ exhibit.name }} ({{ exhibit.status | translate }})
<hip-star-rating class="fix-position" *ngIf="exhibit.ratings" [rating]='exhibit.ratings' [exhibitId]='exhibit.id'></hip-star-rating>
</h2>
<p md-line>{{ exhibit.description }}</p>
<p md-line>
<span class="latitude">{{ exhibit.latitude }}</span>,
<span class="longitude">{{ exhibit.longitude }}</span>
</p>
<p *ngIf="exhibit.tags.length > 0" md-line>
<span *ngFor="let tag of exhibit.tags" class="tag-name">{{ tag }}</span>
</p>
<button md-icon-button click-stop-propagation color="primary" [routerLink]="['/mobile-content/exhibits/edit', exhibit.id]"
title="{{ 'edit' | translate }}">
<md-icon>{{ !inDeletedPage ? 'edit' : 'remove_red_eye'}}</md-icon>
</button>
<div *ngIf="canDelete">
<button md-icon-button click-stop-propagation color="warn" (click)="deleteExhibit(exhibit)" *ngIf="!exhibit.used && !inDeletedPage"
title="{{ 'delete' | translate }}">
<md-icon>delete_forever</md-icon>
</button>
</div>
</md-list-item>
----------------------------------------
Can someone help me to figure it out?

Answer 1

I am new to Angular myself but maybe I can still help. I am noticing a couple things that may be causing issues.
Firstly
When you are iterating across this.allExhibits, I noticed that the this.canDelete is just one value that you keep reassigning after each iteration. By the end it only represents the 'deleteability' of only the last exhibit.
Perhaps you can create some sort of object or array to map against the for..of iteration of this.allExhibits. That way you can store each resolved value of this.canDelete without overwriting it on each iteration.
example.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-example',
templateUrl: './example.component.html'
})
export class ExampleComponent {
currentUser:object = {
name: 'User A',
id: 'A'
};
exhibits:object[] = [
{
title: 'Exhibit A',
id: 'A'
},
{
title: 'Exhibit B',
id: 'B'
},
{
title: 'Exhibit C',
id: 'C'
}
];
constructor() { }
deleteExhibit(index) {
this.exhibits = this.exhibits.filter((_, i) => i != index);
}
}
example.component.html
<div *ngFor="let exhibit of exhibits; let i=index">
<h3>{{exhibit.title}}</h3>
<button *ngIf="exhibit.id == currUser.id" (click)="deleteExhibit(i)">DELETE</button>
<hr/>
</div>
Secondly
I presume the getCurrentUser() is something that happens as the component instantiates. In that case, the *ngIf must await the resolved value of this.canDelete before it can either display or hide the delete button.
Since getCurrentUser() appears to resolve sometime after the component's initial rendering of the view, it maybe be possible that setting the value of this.canDelete is not triggering Angular's change detection.
Perhaps try ChangeDetectorRef.detectChanges() after you resolve the final value of this.canDelete. ChangeDetectorRef is importable from #angular/core and instantiable in the component's constructor: constructor(private changeDetectorRef:ChangeDetectorRef) {}.
Hopefully this helps!